@ferdasfarmazone
Верстальщик!

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

Вот сбтно пример https://www.oxefit.com/xs1 типа слайдера с параллаксом, смотреть в firefox в хроме у меня ломается почему то
6321b6ec5e39f591191022.jpeg
  • Вопрос задан
  • 220 просмотров
Решения вопроса 1
Get-Web
@Get-Web
Front-End Developer
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@limpch
Точно никто не расскажет как это делать, тут большой скрипт. Длинный блок со sticky контентом внутри. Отслеживает точки скролла и на этих точках запускает замену изображения и меняет контент. При нажатии на кнопки, происходит скролл до точки и по достижению срабатывает скрипт изменения контента и блока. Я бы сделал с помощью Intersection Observer отслеживание скролла до точек и обычную замену по индексу точки. Дошли до третьей, вызываем скрипт смены на третьей точке. Высоту главного блока задаем где-то 200-300vh, в зависимости сколько скролить нужно будет, и создаем три блока нужной высоты, при которых будет происходить смена)

Надеюсь ты что то поймешь, из того что я написал, если ты начинающий программист, то пока не лезь в это :)
Ответ написан
Комментировать
@pjery3
https://greensock.com/scrolltrigger/

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
28 нояб. 2022, в 08:14
30000 руб./за проект
28 нояб. 2022, в 08:13
10000 руб./за проект
28 нояб. 2022, в 04:09
8000 руб./за проект