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

Ссылка скопирована
CSS HTML JavaScript
28 апреля 2026 1 ответ

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

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

Дополнительно:

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

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

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

  • hesrun,

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

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

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

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

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

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

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

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

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

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

    • iljaGolubev,

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

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

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

    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Анна SEO Ответ

    Для создания эффекта при скролле на веб-странице можно использовать различные техники, такие как CSS анимации, JavaScript библиотеки или нативный JavaScript код. Один из популярных способов - использовать JavaScript для обработки события прокрутки страницы и изменения стилей элементов в зависимости от позиции скролла.

    Пример реализации эффекта при скролле на странице с помощью JavaScript:

    // Получаем элемент, к которому применяем эффект
const element = document.querySelector('.element');
 
// Обработчик события прокрутки страницы
window.addEventListener('scroll', () => {
  // Получаем текущую позицию скролла
  const scrollPosition = window.scrollY;
 
  // Условие для изменения стилей элемента при прокрутке
  if (scrollPosition > 100) {
    element.style.backgroundColor = 'blue';
  } else {
    element.style.backgroundColor = 'red';
  }
});

    // Получаем элемент, к которому применяем эффект const element = document.querySelector('.element'); // Обработчик события прокрутки страницы window.addEventListener('scroll', () => { // Получаем текущую позицию скролла const scrollPosition = window.scrollY; // Условие для изменения стилей элемента при прокрутке if (scrollPosition > 100) { element.style.backgroundColor = 'blue'; } else { element.style.backgroundColor = 'red'; } });

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

    Также можно использовать CSS анимации для создания эффектов при скролле. Например, добавить класс с анимацией при достижении определенной позиции скролла:

    .element {
  transition: background-color 0.5s;
}
 
.animated {
  background-color: blue;
}

    .element { transition: background-color 0.5s; } .animated { background-color: blue; }

    const element = document.querySelector('.element');
 
window.addEventListener('scroll', () => {
  const scrollPosition = window.scrollY;
 
  if (scrollPosition > 100) {
    element.classList.add('animated');
  } else {
    element.classList.remove('animated');
  }
});

    const element = document.querySelector('.element'); window.addEventListener('scroll', () => { const scrollPosition = window.scrollY; if (scrollPosition > 100) { element.classList.add('animated'); } else { element.classList.remove('animated'); } });

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

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов VPN Почему не работает связка 3X-UI на своем VPS и Necobox на Windows 10 и где искать причину? 0 ответов