SCROLL ANIMATION HTML CSS
Анимация, управляемая прокруткой
Как следует из названия, API анимации, управляемой прокруткой, позволяет создавать динамические анимации на основе прокрутки, не полагаясь на наблюдателей прокрутки или другие сложные сценарии.
Создавайте анимацию, управляемую прокруткой
Подобно тому, как на платформе работает анимация, основанная на времени , теперь вы можете использовать прогресс прокрутки скроллера для запуска, приостановки и изменения анимации. Таким образом, при прокрутке вперед вы увидите прогресс анимации, а при прокрутке назад все будет наоборот. Это позволяет создавать частичные или полностраничные визуальные эффекты с элементами, анимируемыми в области просмотра и внутри нее, что также называется прокруткой , для динамического визуального воздействия.
Анимацию, управляемую прокруткой, можно использовать для выделения важного контента, руководства пользователями по истории или просто для придания динамичности вашим веб-страницам.
@keyframes appear {
from {
opacity: 0;
scale: 0.8;
}
to {
opacity: 1;
scale: 1;
}
}
img {
animation: appear linear;
animation-timeline: view();
animation-range: entry 25% cover 50%;
}
Приведенный выше код определяет простую анимацию, которая появляется в области просмотра путем изменения непрозрачности и масштаба изображения. Анимация управляется положением прокрутки. Чтобы создать этот эффект, сначала настройте анимацию CSS, а затем установите animation-timeline . В этом случае функция view() со значениями по умолчанию отслеживает изображение относительно области прокрутки (которая в данном случае также является областью просмотра).
Важно учитывать поддержку браузера и предпочтения пользователя, особенно для обеспечения доступности. Поэтому используйте правило @supports , чтобы проверить, поддерживает ли браузер анимацию, управляемую прокруткой, и оберните анимацию, управляемую прокруткой, в запрос пользовательских настроек, например @media (prefers-reduced-motion: no-preference) чтобы учитывать предпочтения пользователя в отношении движения. . Сделав эти проверки, вы знаете, что ваши стили будут работать и что анимация не вызовет проблем у пользователя.
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
/* Apply scroll-driven animations here */
}
}