SCROLL ANIMATION HTML CSS
Анимация, управляемая прокруткой, может означать прокрутку на всю страницу, но она также может означать более тонкую анимацию, например сворачивание панели заголовка и отображение тени при прокрутке веб-приложения.
@keyframes shrink-name {
from {
font-size: 2em;
}
to {
font-size: 1.5em;
}
}
@keyframes add-shadow {
from {
box-shadow: none;
}
to {
box-shadow: 0 4px 2px -2px gray;
}
}
header {
animation: add-shadow linear both;
}
h2 {
animation: shrink-name linear both;
}
header, h2 {
animation-timeline: scroll();
animation-range: 0 150px;
}
В этой демонстрации используется несколько различных анимаций ключевых кадров — заголовок, текст, панель навигации и фон — а затем к каждому применяется соответствующая анимация, управляемая прокруткой. Хотя каждый из них имеет разный стиль анимации, все они имеют одинаковую временную шкалу анимации, ближайший скроллер и одинаковый диапазон анимации — от верха страницы до 150 пикселей.