Школа
Веб-разработка

Как сделать анимацию на сайте, чтобы она шла параллельно скроллу?

То есть скроллишь — в это время объект двигается. А когда скроллить перестаёшь, объект замирает. Как это сделано на первой версии сайта Сейгеймса.

Макар Половинка
15 июня 2023
👁 3745   🗩2
Веб-разработка

Как сделать анимацию на сайте, чтобы она шла параллельно скроллу?

То есть скроллишь — в это время объект двигается. А когда скроллить перестаёшь, объект замирает. Как это сделано на первой версии сайта Сейгеймса.

Макар Половинка
15 июня 2023
👁 3745   🗩2
Игорь Петров
Разработчик, преподаватель Школы бюро
Полезно
 14
14
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Обработчик — это функция, которая срабатывает, когда в браузере происходит определённое событие. Например, прокрутка, движение курсора или клик.

Макар!

Обработчик — это функция, которая срабатывает, когда в браузере происходит определённое событие. Например, прокрутка, движение курсора или клик.

Анимация при прокрутке работает так:

  1. Добавляем обработчик события прокрутки.

  2. При срабатывании обработчика вычисляем нужные для анимации значения.

  3. Передаём вычисленные значения в ЦСС и используем для анимации.

Подобным образом в вебе устроена любая реакция на действия пользователя. Например, в одном из прошлых советов таким же образом мы создавали эффект свечения под курсором: добавляли обработчик, получали координаты курсора, передавали их в ЦСС.

Пример

Самый простой вариант анимации — получать процент прокрутки и использовать его в ЦСС. Например, как множитель масштабирования элемента:

ХТМЛ
<div> <div class="circle"></div> <!-- … --> </div>
ЦСС
.circle { width: 100vw; aspect-ratio: 1/1; border-radius: 50%; background: #ffdabb; position: fixed; top: 50%; left: 50%; z-index: -1; /* Берём процент масштабирования из ЦСС-переменной --scroll-percentage */ transform: translate(-50%, -50%) scale(var(--scroll-percentage, 0)); }
Яваскрипт
/* Функция-помощник вернёт процент прокрутки от высоты страницы */ const getDocumentScrollPercentage = () => { const scrollTop = document.documentElement.scrollTop + document.body.scrollTop const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight return scrollTop / scrollHeight } /* Получаем процент прокрутки и прокидываем в ЦСС-переменную */ const draw = () => { document.body.style.setProperty('--scroll-percentage', getDocumentScrollPercentage()); } /* Задаём функцию draw как обработчик события прокрутки scroll. Обратите внимание: мы передаём функцию, а не вызываем её, поэтому не draw(), а draw, без скобочек */ document.addEventListener('scroll', draw) /* Важно поддержать изменение размера окна и запустить функцию один раз при загрузке страницы, чтобы в этих случаях анимация обновилась с учётом актуального процента прокрутки */ window.addEventListener('resize', draw) draw()

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

В примере показан базовый принцип. Код можно развивать и дополнять, в зависимости от задачи, но основная идея останется неизменной: обработчик, вычисление значений и использование их в стилях.

А как в бюро

В платформу бюро для разработки сайтов «Карандашик» встроена продвинутая система анимации. Даже сложные нелинейные анимации настраиваются без программирования и привлечения разработчиков.

Сайт Сейгеймса — первый клиентский проект бюро на «Карандашике», все анимации на нём дизайнеры создавали самостоятельно. См. также сайт Копиката.

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

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
 14
14
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Если нужна более сложная логика анимаций завязанных на скролле, то есть хорошая библиотека GSAP с плагином ScrollTrigger

Михаил Воробьев

Новые версии хромиум‑браузеров поддерживают нативные scroll‑driven animations, которые позволяют описывать такие анимации декларативно и без костылей. Если не смущает пока что ограниченная поддержка — можно пользоваться!

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы