Postoje neke animacije pomicanja koje su moguće u CSS-u bez ikakvog JavaScript-a. Samo pogledajte poglavlje o indikatoru pomicanja, što je očito CSS magija. No, možemo raditi puno animacija pomicanja izravno u CSS-u, uz samo malo informacija koje pruža JavaScript: koliko je stranica pomaknuta.
Pa maknimo to s puta. Pomoću JavaScript jednoslojne veze možemo postaviti prilagođeno svojstvo CSS-a koje zna postotak pomicanja stranice:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);Sada imamo --scrollkao vrijednost koju možemo koristiti u CSS-u.
Ovaj trik dolazi putem Scotta Kelluma koji je pravi CSS majstor trikova!
Postavimo animaciju bez da prvo koristimo tu vrijednost. Ovo je jednostavna animacija vrtnje za SVG element koji će se vrtjeti i vrtjeti zauvijek:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )Evo trika! Sada zaustavimo ovu animaciju. Umjesto da je animiramo tijekom vremenskog razdoblja, animirat ćemo je putem pomicanja tako što ćemo prilagoditi animation-delaykako se stranica pomiče. Ako animation-durationje 1s, to znači pomicanje cijele duljine stranice. je jedna iteracija animacije.
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); ) Pokušajte promijeniti animation-durationna 0.5s. To omogućuje dvije animacije koje se mogu dovršiti s animation-delaymatematikom.
Scott je u svom originalnom demou primijetio i to:
animation-iteration-count: 1; animation-fill-mode: both;Računao sam na neke čudne "prekomjerne" mjere i mogu potvrditi da sam i to vidio, posebno na kratkim prikazima, pa je vrijedno i njih postaviti.
Scott je također na sebe postavio svojstva animacije vezane uz pomicanje :root (), što znači da može odjednom kontrolirati sve animacije na stranici. Evo njegove demonstracije koja istovremeno kontrolira tri animacije: