feat(ui-toolkit): improve parallax scroll behaviour

This commit is contained in:
Fábio Moreira 2018-05-14 18:29:34 +01:00 committed by Sérgio Ramos
parent 155a065281
commit a1154b2520
2 changed files with 23 additions and 11 deletions

View File

@ -82,18 +82,19 @@ export default class extends Component {
}
scrollStopHandler = () => {
window.clearTimeout(isScrolling);
isScrolling = setTimeout(() => {
window.removeEventListener('scroll', this.scrollStopHandler);
window.addEventListener('scroll', this.checkpoint);
isScrolledOutsideView()
? this.setState({ show: false }, () =>
window.removeEventListener('scroll', this.scrollStopHandler)
)
? this.setState({ show: false })
: this.skipParallax();
}, 66);
};
skipParallax = () => {
if (this.state.show) {
if (
this.state.show &&
window.scrollY < document.getElementsByTagName('header')[0].offsetTop
) {
window.scroll({
top: document.getElementsByTagName('header')[0].offsetTop,
left: 0,
@ -102,6 +103,13 @@ export default class extends Component {
}
};
checkpoint = () => {
if (isScrolledOutsideView()) {
window.removeEventListener('scroll', this.checkpoint);
this.setState({ show: false });
}
};
render() {
window.addEventListener('resize', () => {
this.setState({
@ -124,7 +132,7 @@ export default class extends Component {
{array.map((g, i) => (
<Gutter key={g} style={{ left: gutterWidth * i }} />
))}
<Parallax offsetYMax={50} offsetYMin={-50} slowerScrollRate tag="main">
<Parallax offsetYMax={50} offsetYMin={-50} tag="main">
<Text>
<Img src={Plus} />
<Img topRight src={Plus} />
@ -136,6 +144,10 @@ export default class extends Component {
elements, components and guidelines, for anyone developing
products within the Joyent and Triton ecosystems.
</P>
</Text>
</Parallax>
<Parallax offsetYMax={200} offsetYMin={0} slowerScrollRate tag="main">
<Text>
<P white style={{ marginTop: remcalc(60), position: 'absolute' }}>
Scroll down
</P>

View File

@ -61,7 +61,7 @@ const StyleGuideRenderer = ({
<ThemeProvider theme={fullTheme}>
<ParallaxProvider>
<Fragment>
{link === '/' ? <Parallax hideAfterScroll="true" /> : null}
{link === '/' ? <Parallax hideAfterScroll={true} /> : null}
<Header />
<Grid style={{ marginLeft: 0, zIndex: 2, position: 'relative' }}>
<Main>