Прошу Вас дать мне совет, как сделать следущее: на сайте, к примеру https://strolleria.com/ при скроле появляются не сразу два блока с эфектом, это сделано с помощью Lazy loading и React animation? И выпадающий header при скроле. Скиньте пожалуйста ссылки на примеры и дайте советы. Спасибо.
const Root = () => {
const ScrollWrapper = styled.div`
background: blue;
width: 100vw;
position: fixed;
top: 0;
height: 100px;
z-index: 10;
display: ${props => props.display};
transition: all 5s;
`;
const [ ok, setOk ] = useState ( false );
const ScrollEl = (props) => (
<ScrollWrapper display={props.display}>
<h1>Hello</h1>
</ScrollWrapper>
);
const handleWheel = async () => {
if ( pageYOffset >= 250 ) {
await setOk ( true );
return console.log ( ok );
} else {
await setOk ( false );
return console.log ( ok );
}
};
return (
<Layout>
<Header headerCategory={ headerCategory } headerArticles={ headerArticles } />
<Suspense fallback='loading'>
</Suspense>
<React.Suspense fallback="Root content suspense">
<MainContentWrapper onWheel ={ handleWheel }>
<ScrollEl display={ok ? 'flex' : 'none'}/>
<Switch>
<Route exact path="/">
<Redirect to="/prams" />
</Route>
<Route path="/prams" component={ lazy ( 'Prams' ) } />
<Route path="/map" component={ lazy ( 'Map' ) } />
</Switch>
</MainContentWrapper>
</React.Suspense>
</Layout>
);
};
export default Root;