Как делается такой эффект при скролле?

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

1. Параллакс-эффект:
Параллакс-эффект создает иллюзию глубины и движения объектов при прокрутке страницы. Его можно достичь, изменяя позицию фонового изображения относительно позиции прокрутки страницы. Для этого нужно использовать свойство CSS background-position и слушать событие scroll с помощью JavaScript.

Пример кода:

   <div class="parallax"></div>
   <script>
       window.addEventListener('scroll', function () {
           var offset = window.pageYOffset;
           var parallaxElement = document.querySelector('.parallax');
           parallaxElement.style.backgroundPositionY = offset * 0.7 + 'px';
       });
   </script>

В этом примере .parallax - это элемент, для которого нужно создать параллакс-эффект. Мы добавляем обработчик события scroll, который вызывается при прокрутке страницы. Затем мы получаем текущую позицию прокрутки при помощи window.pageYOffset и изменяем backgroundPositionY элемента .parallax, чтобы создать параллакс-эффект. Значение 0.7 в коде - это множитель, который определяет скорость движения фонового изображения.

2. Эффект появления при прокрутке:
Этот эффект позволяет элементам появляться при прокрутке страницы. Для этого используются CSS-анимации в сочетании с JavaScript для добавления классов и управления анимацией.

Пример кода:

   <div class="scroll-animation"></div>
   <script>
       window.addEventListener('scroll', function () {
           var scrollAnimation = document.querySelector('.scroll-animation');
           var elementTopPosition = scrollAnimation.getBoundingClientRect().top;
           var windowHeight = window.innerHeight;

           if (elementTopPosition < windowHeight) {
               scrollAnimation.classList.add('animate');
           }
       });
   </script>
   <style>
       .scroll-animation {
           opacity: 0;
           transition: opacity 1s;
       }
       .scroll-animation.animate {
           opacity: 1;
       }
   </style>

В этом примере элементу .scroll-animation присваивается класс animate, когда элемент становится видимым на экране. Мы используем метод getBoundingClientRect() для получения позиции элемента относительно окна просмотра. Затем мы сравниваем эту позицию с высотой окна просмотра window.innerHeight и добавляем класс animate, когда элемент появляется на экране.

Это всего лишь два примера эффектов, которые можно создать при помощи JavaScript и CSS. Существует множество других методов и техник, которые можно использовать для создания эффектов при прокрутке, в зависимости от того, какой эффект и идею Вы хотите реализовать.