Обработчик — это функция, которая срабатывает, когда в браузере происходит определённое событие. Например, прокрутка, движение курсора или клик.
Макар!
Обработчик — это функция, которая срабатывает, когда в браузере происходит определённое событие. Например, прокрутка, движение курсора или клик.
Анимация при прокрутке работает так:
Добавляем обработчик события прокрутки.
При срабатывании обработчика вычисляем нужные для анимации значения.
Передаём вычисленные значения в ЦСС и используем для анимации.
Подобным образом в вебе устроена любая реакция на действия пользователя. Например, в одном из прошлых советов таким же образом мы создавали эффект свечения под курсором: добавляли обработчик, получали координаты курсора, передавали их в ЦСС.
Пример
Самый простой вариант анимации — получать процент прокрутки и использовать его в ЦСС. Например, как множитель масштабирования элемента:
ХТМЛ<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()
В примере показан базовый принцип. Код можно развивать и дополнять, в зависимости от задачи, но основная идея останется неизменной: обработчик, вычисление значений и использование их в стилях.
А как в бюро
В платформу бюро для разработки сайтов «Карандашик» встроена продвинутая система анимации. Даже сложные нелинейные анимации настраиваются без программирования и привлечения разработчиков.
Сайт Сейгеймса — первый клиентский проект бюро на «Карандашике», все анимации на нём дизайнеры создавали самостоятельно. См. также сайт Копиката.
Конечно, удобную работу и лаконичность «Карандашика» под капотом обеспечивает тонна хитрого кода. Но в основе этого кода лежит всё тот же принцип, описанный выше: обработать событие прокрутки, вычислить значения, использовать в стилях.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.