Как реализовать подобную скролл-анимацию на сайте?

Для реализации скролл-анимации на сайте можно использовать JavaScript библиотеку, такую как ScrollMagic. ScrollMagic позволяет легко добавлять анимации к элементам при прокрутке страницы.

Вот пример того, как можно реализовать скролл-анимацию с помощью ScrollMagic:

1. Подключите библиотеку ScrollMagic и его плагины к вашему проекту. Вы можете загрузить их с CDN или установить через пакетный менеджер npm.

2. Инициализируйте ScrollMagic и создайте новый контроллер:

var controller = new ScrollMagic.Controller();

3. Создайте новую сцену, указав элемент, к которому вы хотите применить анимацию, и параметры анимации (например, смещение, продолжительность, и т.д.):

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger", // элемент, который инициирует анимацию
    duration: 300, // продолжительность анимации (в пикселях)
    offset: 100 // смещение начала анимации относительно верхней границы экрана
})
.setClassToggle("#element", "animated") // добавление класса "animated" к элементу
.addTo(controller); // добавление сцены к контроллеру

4. Добавьте стили для класса "animated" в вашем CSS файле, чтобы задать анимацию:

.animated {
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.3s ease;
}
.animated.active {
    opacity: 1;
    transform: translateY(0);
}

5. Теперь при прокрутке страницы элемент с id "element" будет анимироваться при достижении элемента с id "trigger".

Это простой пример реализации скролл-анимации с использованием ScrollMagic. Вы можете настраивать параметры анимации, добавлять дополнительные эффекты и кастомизировать анимацию под свои нужды.