Как сделать такую анимацию, параллакс?

Question

[Василь Бойко]

Вот сбтно пример https://www.oxefit.com/xs1 типа слайдера с параллаксом, смотреть в firefox в хроме у меня ломается почему то

Answer 1

[Виталий Першин]

locomotive-scroll
ScrollMagic
scrolltrigger

Answer 2

[limpch]

Точно никто не расскажет как это делать, тут большой скрипт. Длинный блок со sticky контентом внутри. Отслеживает точки скролла и на этих точках запускает замену изображения и меняет контент. При нажатии на кнопки, происходит скролл до точки и по достижению срабатывает скрипт изменения контента и блока. Я бы сделал с помощью Intersection Observer отслеживание скролла до точек и обычную замену по индексу точки. Дошли до третьей, вызываем скрипт смены на третьей точке. Высоту главного блока задаем где-то 200-300vh, в зависимости сколько скролить нужно будет, и создаем три блока нужной высоты, при которых будет происходить смена)

Надеюсь ты что то поймешь, из того что я написал, если ты начинающий программист, то пока не лезь в это :)

Answer 3

[pjery3]

https://greensock.com/scrolltrigger/

На том сайте, который вы скинули, он как раз и используется.
У меня кстати на хроме зашло, только грузит долго.
Немного подсказки вам как застилить) заходите на сайт, в devTools нажимаете сочетание клавиш ctrl+shift+f (не знаю как на других, но в хроме так), в поиске вбиваете gsap и там будут всякие совпадения. Попробуйте найти, ото мне кажется с нуля писать такое для вас займет оооочень много времени)