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