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

Question

[hesrun]

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

https://www.audemarspiguet.com/com/en/collections/...

Comments

[Максим]

Не спорю о том что на канвасе это можно сделать но на мой взгляд, взять видео и разбить его на кадры и при прокрутке менять их...

[hesrun]

Максим, не особо понял как можно управлять роликом по прокрутке...?
Я предполагал, что это берется куча картинок раскадровкой, и при скролле мы показываем кадр какой-то картинки...
А в видео можно управлять только секундами...?

Или вы это и имели ввиду?)

[iljaGolubev]

hesrun,

взять видео и разбить его на кадры

. На том сайте так и сделано. только не с видео, а с 3d рендера, скорее всего.

Answer 1

[iljaGolubev]

если посмотреть в devtools network то видно кучу jpg и png.
При прокрутке страницы нужно показывать нужное. Дальше пишите js управляющий логикой отображения.

Можно через css background.
Можно найти подходящую библиотеку (впрочем, сомневаюсь что именно такие существуют).
Или использовать фреймворк: treejs, GSAP, konvajs. Последний, имхо, попроще будет для старта и ближе к решению на том сайте.

Answer 2

[Михаил Р.]

Возможно есть какая-то библиотека...?

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

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

Вкусовщина: если в браузере не реализован плавный скролл, то фоновое изображение из Вашего примера изменяется очень резко, что не приятно...

Comments

[iljaGolubev]

если в браузере не реализован плавный скролл,

https://idiotwu.github.io/smooth-scrollbar/ ?

[Михаил Р.]

iljaGolubev,

https://idiotwu.github.io/smooth-scrollbar/ ?

Да, я знаю про кастомные скроллы. У меня уточнение было относительно сайта-примера автора.

Answer 3

[its2easyy]

Делал свою библиотеку для анимации кадров https://github.com/its2easy/animate-images. Чтобы привязать анимацию к скролу у меня на проектах был https://greensock.com/scrolltrigger/, но можно и с Intersection Observer.