Есть некоторые анимации прокрутки, которые возможны в CSS вообще без JavaScript. Достаточно взглянуть на главу об индикаторе прокрутки, который явно является магией CSS. Но мы можем выполнять большую часть работы с анимацией прокрутки прямо в CSS, используя лишь один небольшой кусочек информации, предоставляемый JavaScript: насколько далеко прокручена страница.
Так что давайте избавимся от этого. С помощью однострочника JavaScript мы можем установить настраиваемое свойство CSS, которое знает процент прокручиваемой страницы:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);Теперь у нас --scrollесть значение, которое мы можем использовать в CSS.
Этот трюк придуман Скоттом Келлумом, который является настоящим мастером трюков с CSS!
Давайте сначала настроим анимацию без использования этого значения. Это простая анимация вращения для элемента SVG, который будет вращаться бесконечно:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )Вот и трюк! Теперь остановим эту анимацию. Вместо того, чтобы анимировать его в течение определенного периода времени, мы будем анимировать его с помощью положения прокрутки, регулируя при прокрутке animation-delayстраницы. Если animation-durationэто 1 с, это означает прокрутку на всю длину страницы. это одна итерация анимации.
svg ( position: fixed; /* make sure it stays put so we can see it! */ animation: rotate 1s linear infinite; animation-play-state: paused; animation-delay: calc(var(--scroll) * -1s); ) Попробуйте изменить animation-durationTo 0.5s. Это позволяет на двух анимациях можно дополнить animation-delayматематикой.
Скотт отметил в своей первоначальной демонстрации, что также установил:
animation-iteration-count: 1; animation-fill-mode: both;Учтены некоторые странности «перерегулирования», и я могу засвидетельствовать, что я тоже это видел, особенно на коротких окнах просмотра, так что их тоже стоит установить.
Скотт также установил свойства анимации, связанные с прокруткой, для самого :root ()себя, что означает, что он может управлять всеми анимациями на странице одновременно. Вот его демонстрация, которая управляет тремя анимациями одновременно: