Skip to content

Instantly share code, notes, and snippets.

@stanographer
Created March 18, 2019 20:13
Show Gist options
  • Save stanographer/8ef14b8a92837a8a1b1ca06945c7be31 to your computer and use it in GitHub Desktop.
Save stanographer/8ef14b8a92837a8a1b1ca06945c7be31 to your computer and use it in GitHub Desktop.
import React, { Fragment, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
function Parallax(props) {
const [YPos, setYPos] = useState(0);
const { uppermodulevisible, addclass } = props;
function handleScroll() {
if (uppermodulevisible === 1) {
console.log("you were module visible", uppermodulevisible);
let pos = Math.floor(window.scrollY * -1.5);
// console.log('on scroll scroll scroll', pos);
window.requestAnimationFrame(() => setYPos(pos));
}
}
function setUp() {
window.addEventListener('scroll', () => {
handleScroll();
}, false);
}
function tearDown() {
window.removeEventListener('scroll', handleScroll, false);
}
useEffect(() => {
setUp();
return (() => tearDown());
}, [uppermodulevisible]);
return (
<Fragment>
<div
style={ { transform: `translateY(${ YPos }px)` } }
className={ addclass }
{ ...props }
/>
</Fragment>
);
}
Parallax.propTypes = {
addclass: PropTypes.string,
uppermodulevisible: PropTypes.number,
};
export default Parallax;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment