scroll()
Создают безымянные шкалы прокрутки для `animation-timeline`: `scroll()` следит за прокручиваемым контейнером, `view()` — за проходом самого элемента через видимую область.
Синтаксис
animation-timeline: scroll(scroller axis) | view(axis inset);Параметры
| Параметр | Тип | Описание |
|---|---|---|
| scroller | nearest | root | self | Только `scroll()`. Какой контейнер: `nearest` (по умолчанию), `root` (страница) или `self`. |
| axis | block | inline | x | y | Направление прокрутки: `block` (по умолчанию), `inline`, `x` или `y`. |
| inset | length | % | Только `view()`. Сужает видимую область, например `view(block 20%)`. |
Примеры
Пункты проявляются и выезжают, когда прокручиваются в зону видимости:
<style>
.list { height: 180px; overflow-y: auto; border: 1px solid #ccc; padding: 8px; }
.item {
height: 60px; margin-bottom: 8px; background: lightblue;
animation: appear linear both;
animation-timeline: view();
animation-range: entry;
}
@keyframes appear { from { opacity: 0; translate: -40px 0; } }
</style>
<div class="list">
<div class="item">One</div><div class="item">Two</div><div class="item">Three</div>
<div class="item">Four</div><div class="item">Five</div><div class="item">Six</div>
</div>Примечания
scroll() подходит для индикаторов всей прокрутки (полоска прогресса, сжимающаяся шапка). view() — для эффектов отдельного элемента: появление, параллакс. Обеим нужен прокручиваемый контейнер; если прокручивать нечего, анимация остаётся в начале.
См. также
- animation-timeline — Связывает CSS-анимацию с прокруткой вместо времени: анимация продвигается по мере прокрутки страницы или элемента.
- animation-range — Задаёт, какую часть шкалы прокрутки занимает анимация — например, только пока элемент въезжает на экран.
- @keyframes — Описывает шаги анимации, которую затем запускают свойством `animation`.
Вопросы и ответы по теме
В учебнике
- Анимация при прокрутке — Анимации, привязанные к прокрутке, — animation-timeline с функциями scroll() и view(), индикатор чтения, появление блоков при прокрутке, animation-range, поддержка браузерами и запасной вариант.