Van néhány görgető animáció, amelyek a CSS-ben JavaScript nélkül is elérhetők. Csak nézze meg a Scroll Indicator fejezetét, amely egyértelműen CSS varázslat. De sok görgetési animációs munkát végezhetünk közvetlenül a CSS-ben, csupán egy kis JavaScript-információval: mennyit görgetett az oldal.
Tehát tegyük ezt félre. JavaScript egysoros segítségével beállíthatunk egy CSS egyéni tulajdonságot, amely ismeri a görgetett oldal százalékos arányát:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);Most van --scrollegy értékünk, amelyet felhasználhatunk a CSS-ben.
Ez a trükk Scott Kellum által jön, aki eléggé a CSS trükkmestere!
Állítsunk be egy animációt anélkül, hogy először ezt az értéket használnánk. Ez egy egyszerű pörgő animáció egy SVG elemhez, amely örökké forogni és forogni fog:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )Itt jön a trükk! Most szüneteltessük ezt az animációt. Ahelyett, hogy egy időn keresztül animálnánk, a görgetési pozíción keresztül animáljuk animation-delayaz oldal görgetése közbeni beállításával . Ha az animation-duration1-es, az azt jelenti, hogy görgetni kell az oldal teljes hosszát. az animáció egyik iterációja.
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); ) Próbálja meg módosítani a animation-durationa 0.5s. Ez két animációt tesz lehetővé a animation-delaymatematikával.
Scott eredeti bemutatójában megjegyezte, hogy szintén:
animation-iteration-count: 1; animation-fill-mode: both;Számos „túlszárnyalt” furcsaságot okozott, és igazolhatom, hogy én is láttam már, különösen a rövid nézetablakokban, ezért érdemes ezeket is beállítani.
Scott a görgetéssel kapcsolatos animációs tulajdonságokat :root ()önmagában is beállította , vagyis egyszerre vezérelhette az oldalon található összes animációt. Itt van a bemutatója, amely egyszerre irányít három animációt: