Как эффект скролла с наложением следующего блока на предыдущий (React)?

Ссылка скопирована
CSS HTML React
9 февраля 2026 1 ответ

Как сделать ускоренный "наплыв" блоков как в этом примере (блоки с закругленными краями)?
https://www.getrepeat.io/

Тут используется three.js.
Но мне кажется похожий эффект можно получить с CSS и JS

Дополнительно:

transform: translateZ; perspective: 123px;

transform: translateZ; perspective: 123px;

  • imko, translateZ должен принимать аргумент.
    И скорее всего это создаст эффект паралакса по вертикали, а нужно последовательное наложение блоков в одну сторону
  • Андрей Чирков, ну укажи туда аргумент раз нужен) Я ж просто что использовать показываю. Комбинируешь со sticky и должно получиться что ты и просил

    • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Дмитрий К. Ответ

    Для создания эффекта скролла с наложением следующего блока на предыдущий в React, вам потребуется использовать CSS и JavaScript. Вот пример того, как вы можете достичь этого эффекта:

    1. Создайте два блока div в вашем компоненте React. Первый блок будет иметь класс "block1", а второй блок - "block2".

    2. В CSS задайте стили для блоков, чтобы они были позиционированы абсолютно и занимали всю ширину экрана. Установите высоту блока на 100vh, чтобы они занимали всю высоту экрана.

    3. Для блока "block2" установите свойство display на "none", чтобы он изначально был скрыт.

    4. Добавьте обработчик события скролла к вашему компоненту React, который будет отслеживать позицию скролла.

    5. В обработчике события скролла определите, когда пользователь достигает конца блока "block1". Когда это происходит, покажите блок "block2", изменив его свойство display на "block".

    Пример кода:

    import React, { useEffect } from 'react';
 
const ScrollEffectComponent = () => {
  useEffect(() => {
    const handleScroll = () => {
      const block1 = document.querySelector('.block1');
      const block2 = document.querySelector('.block2');
 
      if (window.scrollY > block1.clientHeight) {
        block2.style.display = 'block';
      } else {
        block2.style.display = 'none';
      }
    };
 
    window.addEventListener('scroll', handleScroll);
 
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);
 
  return (
    <div>
      <div>Block 1 content</div>
      <div style="{{">Block 2 content</div>
    </div>
  );
};
 
export default ScrollEffectComponent;

    import React, { useEffect } from 'react'; const ScrollEffectComponent = () =&gt; { useEffect(() =&gt; { const handleScroll = () =&gt; { const block1 = document.querySelector('.block1'); const block2 = document.querySelector('.block2'); if (window.scrollY &gt; block1.clientHeight) { block2.style.display = 'block'; } else { block2.style.display = 'none'; } }; window.addEventListener('scroll', handleScroll); return () =&gt; { window.removeEventListener('scroll', handleScroll); }; }, []); return ( <div> <div>Block 1 content</div> <div style="{{">Block 2 content</div> </div> ); }; export default ScrollEffectComponent;

    Этот код создаст эффект скролла с наложением следующего блока на предыдущий в React. Помните, что это всего лишь пример и вы можете настраивать стили и поведение блоков по вашему усмотрению.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Telegram Как диагностировать ошибку с подключением к прокси в мобильном приложении Telegram? 0 ответов