Задать вопрос

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

Всем привет!
Подскажите, кто делал и может быть кто-то знает как сделать такой эффект при скролле страницы?
Возможно есть какая-то библиотека...? Может в песочнице че-то похожее...
По ковырял страничку, у них все происходит в canvas...

https://www.audemarspiguet.com/com/en/collections/...
  • Вопрос задан
  • 682 просмотра
Подписаться 4 Простой 3 комментария
Решения вопроса 3
@iljaGolubev
если посмотреть в devtools network то видно кучу jpg и png.
При прокрутке страницы нужно показывать нужное. Дальше пишите js управляющий логикой отображения.

Можно через css background.
Можно найти подходящую библиотеку (впрочем, сомневаюсь что именно такие существуют).
Или использовать фреймворк: treejs, GSAP, konvajs. Последний, имхо, попроще будет для старта и ближе к решению на том сайте.
Ответ написан
Комментировать
Mike_Ro
@Mike_Ro Куратор тега JavaScript
Python, JS, WordPress, SEO, Bots, Adversting
Возможно есть какая-то библиотека...?

В примерах ниже, реализован механизм изменения изображений при скролле, Вам же необходимо адаптировать его под себя (т.е. поворачивать или менять изображение при скролле):
https://github.com/alexfoxy/lax.js
https://github.com/locomotivemtl/locomotive-scroll

Подскажите, кто делал и может быть кто-то знает как сделать такой эффект при скролле страницы?

Вкусовщина: если в браузере не реализован плавный скролл, то фоновое изображение из Вашего примера изменяется очень резко, что не приятно...
Ответ написан
@its2easyy
Делал свою библиотеку для анимации кадров https://github.com/its2easy/animate-images. Чтобы привязать анимацию к скролу у меня на проектах был https://greensock.com/scrolltrigger/, но можно и с Intersection Observer.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы