2021-05-17 10:30:01
#заметка дня
Ну что, настало время второй части заметки про анимацию по скроллу: https://t.me/htmlshit/614
На сей раз в дело идут самые современные API.
Давайте определим, что же нам нужно, чтобы связать прокрутку с элементом?
Да в общем, не так много: высота документа, высота видимой области экрана, координаты "начала" и "конца" элемента относительно документа и видимой высоты экрана, статус прокрутки.
Теперь можно составить пропорцию и анимировать любое нужное нам свойство элемента, что мы и делали в прошлый раз.
Но ведь браузеру и так это всё уже известно! Неужели нельзя упростить? Так вот, можно. Ну, почти. И для этого создаются новые браузерные API под общим именем ScrollTimeline: https://wicg.github.io/scroll-animations/
Черновик, понятное дело.
Выражаясь формальным языком, роль временной шкалы для нашей анимации будет выполнять, собственно, скроллбар. Точнее, процесс его прокрутки. Контроль — в руках пользователя.
Набросаем код для логики, описанной выше. Самое интересное: никакого псевдокода! Итак:
@scroll-timeline fill {
source: selector(body);
scroll-offsets: selector(#id) end 0, selector(#id) end 1;
time-range: 1s;
}
Давайте разбираться, что же здесь написано:
@-правило scroll-timeline сообщает браузеру, что мы собираемся использовать состояние прокрутки документа и передаём набор правил с именем fill.
source: источник данных о скролле, в данном случае, тело документа, но можно передать или body или id элемента. С классами не выйдет. Тем не менее, как вы могли догадаться, следить за скроллом можно где угодно.
scroll-offsets: здесь происходит вся магия. Используя селектор нужного нам элемента (или нескольких) мы можем указать, в какой же конкретно момент начинать и заканчивать нашу анимацию. Вырезать только нужную часть временной шкалы, если желаете.
Причём, start и end обозначают состояние полосы прокрутки (сверху вниз), а числовые значения — состояние видимости элемента, где 0 — находится за пределами видимой области экрана и 1 — хоть немного виден.
Конечно, можно и просто указать абсолютные значения, например: 100vh, 200vh.
Только такое дело... В Chrome сейчас это не работает, нужно указывать отдельно правила start и end. Баг уже заявлен.
time-range: отображение длительности нужной анимации на скролл. В сухом остатке, если ваша @keyframes-анимация длится 1 секунду, а time-range равен 2 секундам, то ваша анимация закончится ровно на половине указанного интервала прокрутки.
Ну и всё, что нам остаётся, это указать имя нашего таймлайна в анимации. Очевидно, это должно поддерживаться браузером:
animation: 1s linear forwards fill;
animation-timeline: fill;
Если вы сейчас такие довольные побежали это всё пробовать, спешу вас разочаровать: всё это в глубокой бете. Чтобы потестировать в Chrome, нужно пройти на страницу скрытых настроек и включить Experimental Web Platform Features: chrome://flags/#enable-experimental-web-platform-features
И вот теперь можно посмотреть пример: https://codepen.io/alinaki/pen/NWpqyrO
По-моему, прекрасно. Было бы, если бы работало везде.
Но не всё так грустно! Ведь помимо черновика CSS-спецификации готовится и JavaScript API. А что это значит? Что можно найти полифилл!
И ведь правда можно: https://github.com/flackr/scroll-timeline
Одна проблема: на этот полифилл нужен ещё один полифилл, потому что не все браузеры поддерживают современную объектную модель CSS. А ещё нужен Web Animations API... чота сложно.
Тем не менее, вуаля: https://codepen.io/alinaki/pen/XWMbGRa (подключение полифилла там не самое простое, задавайте ваши вопросы в @htmlshitchat; интересующий вас код — с 55 строки).
Разбираться с API оставляю вам в качестве домашнего задания. А вот в следующий раз попробуем сделать то же самое на GSAP, чтобы быть ближе к народу.
#css #animation #timeline #scroll
849 viewsedited 07:30
Б
