#статья дня

Итак, scroll-driven анимации уже давно реальность, пусть и поддерживаются пока только в Chrome, начиная с версии 115. Но они являются прекрасным примером прогрессивного улучшения, а значит, заработают без проблем сразу, как Safari и Firefox их начнут поддерживать.

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

Итак, сегодня на обзоре статья деврела из Google Брамуса Ван-Дамма. Он пионер CSS-анимаций по скроллу и посвятил этому уже не один год.

Ещё раз ссылка: https://www.bram.us/2023/10/23/css-scroll-detection/

Рассказывается о механиках определения направления скролла и применении разных эффектов в зависимости от, включая задержку начала анимаций.

Поскольку есть немаленькая вероятность, что вы пришли в канал по сегодняшней рекламе, вот собственно её исходник: https://codepen.io/alinaki/pen/rNPVjKG

Всё волшебство кроется в грамотном применении CSS-переменных. Кто-то может помнит, что я рассказывал о нативных миксинах в CSS, об анимациях по ключевам кадрам.

Ключевые кадры штука очень мощная и их не обязательно применять для, собственно, анимаций. Вот, например, можно отложить заполнение некой CSS-переменной: https://codepen.io/bramus/pen/YzdbdyL

В итоге, дальше дело техники: отложенная позиция скролла вычитается из текущей и получаем направление скролла!

А уж куда это знание применить — дело ваше. Рекомендую к прочтению!

#css #animation #scroll