Има някои анимации за превъртане, които са възможни в 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е 1s, това означава да превъртате цялата дължина на страницата. е една итерация на анимацията.
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 ()себе си, което означава, че може да контролира всички анимации на страницата наведнъж. Ето неговата демонстрация, която контролира три анимации едновременно: