Există câteva animații de defilare care sunt posibile în CSS fără niciun JavaScript. Uitați-vă doar la capitolul de pe Indicatorul de derulare, care este în mod clar magia CSS. Dar putem face o mulțime de animații de defilare direct în CSS cu doar un pic de informații furnizate de JavaScript: cât de departe a fost derulată pagina.
Deci, să scoatem asta din cale. Cu un JavaScript unic, putem seta o proprietate personalizată CSS care cunoaște procentajul paginii defilate:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);Acum avem --scrollca valoare pe care o putem folosi în CSS.
Acest truc vine de la Scott Kellum, care este destul de maestru în înșelăciune CSS!
Să configurăm o animație fără a utiliza acea valoare la început. Aceasta este o animație de rotire simplă pentru un element SVG care se va roti și se va roti pentru totdeauna:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )Iată trucul! Acum, să întrerupem această animație. În loc să-l animăm într-o perioadă de timp, îl vom anima prin poziția de derulare, ajustând pe animation-delaymăsură ce pagina se derulează. Dacă animation-durationeste 1s, asta înseamnă să derulați întreaga lungime a paginii. este o iterație a animației.
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); ) Încercați să schimbați animation-durationCătre 0.5s. Acest lucru permite două animații pot fi completate cu animation-delaymatematica.
Scott a remarcat în demo-ul său original că și setarea:
animation-iteration-count: 1; animation-fill-mode: both;Contabilizat pentru o oarecare ciudățenie de „depășire” și pot atesta că am văzut-o și eu, în special pe ecranele scurte, deci merită să le setezi și pe acestea.
Scott a setat, de asemenea, proprietățile de animație legate de defilare :root (), ceea ce înseamnă că ar putea controla toate animațiile de pe pagină simultan. Iată demo-ul său care controlează simultan trei animații: