1

Прошу Вас дать мне совет, как сделать следущее: на сайте, к примеру 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;

2
  • отслеживаете скролл - добавляете класс, который хватает за собой анимацию (шапка), отслеживаете видимость карточек - добавляете класс, который хватает за собой анимацию
    – meine
    Commented 20 мар. 2020 в 16:08
  • @meine Добавил код, посмотрите пожалуйста, и скажите что не так, (он работает, но я думаю можно сделать лучше ). еще такой вопрос. Поставил событие onWheel, onScroll не работает, почему?
    – Slavick
    Commented 22 мар. 2020 в 17:38

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Посмотрите другие вопросы с метками или задайте свой вопрос.