feat(ui-toolkit): improve parallax scroll behaviour
This commit is contained in:
parent
155a065281
commit
a1154b2520
@ -82,18 +82,19 @@ export default class extends Component {
|
||||
}
|
||||
|
||||
scrollStopHandler = () => {
|
||||
window.clearTimeout(isScrolling);
|
||||
isScrolling = setTimeout(() => {
|
||||
isScrolledOutsideView()
|
||||
? this.setState({ show: false }, () =>
|
||||
window.removeEventListener('scroll', this.scrollStopHandler)
|
||||
)
|
||||
: this.skipParallax();
|
||||
}, 66);
|
||||
window.removeEventListener('scroll', this.scrollStopHandler);
|
||||
window.addEventListener('scroll', this.checkpoint);
|
||||
|
||||
isScrolledOutsideView()
|
||||
? this.setState({ show: false })
|
||||
: this.skipParallax();
|
||||
};
|
||||
|
||||
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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user