V CSS jsou možné některé animace posouvání bez jakéhokoli JavaScriptu. Stačí se podívat na kapitolu Scroll Indicator, která je jasně kouzlem CSS. Můžeme ale udělat hodně práce s rolovací animací přímo v CSS pouze s trochou informací poskytovaných JavaScriptem: jak daleko se stránka posunula.
Pojďme to tedy z cesty. S jednorázovou linkou JavaScriptu můžeme nastavit vlastní vlastnost CSS, která zná procento rolované stránky:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);Nyní máme --scrolljako hodnotu, kterou můžeme použít v CSS.
Tento trik pochází od Scotta Kelluma, který je docela mistrem triků v CSS!
Pojďme nastavit animaci, aniž bychom nejprve použili tuto hodnotu. Jedná se o jednoduchou rotující animaci pro prvek SVG, který se bude točit a točit navždy:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )Tady přichází trik! Pozastavme nyní tuto animaci. Spíše než to animovat v určitém časovém období, budeme to animovat pomocí pozice posouvání úpravou, animation-delayjak se stránka posouvá. Pokud animation-durationje 1 s, znamená to posouvání po celé délce stránky. je jedna iterace animace.
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); ) Zkuste změnit animation-durationna 0.5s. To umožňuje dvě animace, které lze doplnit animation-delaymatematikou.
Scott ve své původní ukázce poznamenal, že také nastavení:
animation-iteration-count: 1; animation-fill-mode: both;Počítá se s nějakou „překročení“ podivnosti a mohu potvrdit, že jsem to viděl také, zejména na krátkých výřezech, takže stojí za to je také nastavit.
Scott také nastavil vlastnosti animace související s posouváním na :root ()sebe, což znamená, že může ovládat všechny animace na stránce najednou. Tady je jeho ukázka, která ovládá tři animace současně: