V CSS existuje niekoľko animácií rolovania, ktoré sú možné vôbec bez použitia JavaScriptu. Stačí sa pozrieť na kapitolu Scroll Indicator, ktorá je jednoznačne kúzlom CSS. Ale dokážeme urobiť veľa navigačnej animácie priamo v CSS s iba trochou informácií poskytovaných JavaScriptom: ako ďaleko sa stránka posunula.
Poďme teda z toho. Pomocou jednorázového kódu JavaScript môžeme nastaviť vlastnú vlastnosť CSS, ktorá pozná percento rolovanej stránky:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);Teraz máme --scrollako hodnotu, ktorú môžeme použiť v CSS.
Tento trik pochádza od Scotta Kelluma, ktorý je celkom majstrom trikov v CSS!
Poďme vytvoriť animáciu bez použitia tejto hodnoty na začiatku. Toto je jednoduchá animácia točenia pre prvok SVG, ktorý sa bude točiť navždy:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )Tu prichádza trik! Pozastavme teraz túto animáciu. Namiesto toho, aby sme ho animovali v určitom časovom období, budeme ho animovať pomocou polohy posúvania animation-delaytak, že upravíme posúvanie stránky. Ak animation-durationje 1 s, znamená to rolovanie po celej dĺžke stránky. je jedna iterácia animácie.
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); ) Skúste zmeniť animation-durationna 0.5s. To umožňuje dve animácie, ktoré je možné doplniť animation-delaymatematikou.
Scott vo svojej pôvodnej ukážke poznamenal, že tiež stanovuje:
animation-iteration-count: 1; animation-fill-mode: both;Vypočítaná za určitú „prekročenú“ čudnosť a môžem potvrdiť, že som to videl tiež, najmä na krátkych výrezoch, takže stojí za to nastaviť aj tieto.
Scott tiež nastavil vlastnosti animácie súvisiace s posúvaním :root (), čo znamená, že mohla ovládať všetky animácie na stránke naraz. Tu je jeho ukážka, ktorá ovláda súčasne tri animácie: