Obstaja nekaj animacij drsenja, ki so možne v CSS brez JavaScript. Samo poglejte poglavje o indikatorju drsenja, ki je očitno magija CSS. Toda veliko del animacije drsenja lahko opravimo neposredno v CSS z le nekaj informacijami, ki jih ponuja JavaScript: kako daleč se je stran pomaknila.
Torej, odstranimo to s poti. Z enojno podlogo JavaScript lahko nastavimo lastnost CSS po meri, ki pozna odstotek pomaknjene strani:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);Zdaj imamo --scrollkot vrednost, ki jo lahko uporabimo v CSS.
Ta trik pripelje Scott Kellum, ki je dober mojster CSS trikov!
Nastavimo animacijo, ne da bi najprej uporabili to vrednost. To je preprosta animacija vrtenja za element SVG, ki se bo vrtel in vrtel večno:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )Tu prihaja trik! Zdaj pa zaustavimo to animacijo. Namesto da bi ga animirali v določenem časovnem obdobju, ga bomo animirali prek položaja drsenja tako, da prilagodimo način drsenja animation-delaystrani. Če je animation-durationenak 1s, to pomeni pomikanje po celotni dolžini strani. je ena ponovitev 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); ) Poskusite spremeniti animation-durationna 0.5s. To omogoča dve animaciji, ki ju je mogoče zaključiti z animation-delaymatematiko.
Scott je v svoji prvotni predstavitvi ugotovil, da je tudi to:
animation-iteration-count: 1; animation-fill-mode: both;Ugotovljeno je bilo nekaj "preseganja" nenavadnosti in lahko potrdim, da sem ga tudi sam videl, zlasti na kratkih oknih za ogled, zato je vredno nastaviti tudi te.
Scott je tudi sam določil lastnosti animacije, povezane z drsenjem :root (), kar pomeni, da je lahko hkrati nadzoroval vse animacije na strani. Tu je njegova predstavitev, ki hkrati nadzoruje tri animacije: