Є кілька анімацій прокрутки, які можливі в 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-duration1s, це означає прокручування всієї довжини сторінки. - це одна ітерація анімації.
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-durationна 0.5s. Це дозволяє дві анімації можна завершити за допомогою animation-delayматематики.
Скотт зазначив у своєму оригінальному демо, що також встановлює:
animation-iteration-count: 1; animation-fill-mode: both;Враховано деяку дивовижність "перевищення", і я можу підтвердити, що я це теж бачив, особливо на коротких вікнах перегляду, тому варто також встановити їх.
Скотт також встановив властивості анімації, пов’язані із прокруткою, на :root ()собі, це означає, що він міг керувати всіма анімаціями на сторінці відразу. Ось його демонстрація, яка керує трьома анімаціями одночасно:
