On joitain vieritysanimaatioita, jotka ovat mahdollisia CSS: ssä ilman JavaScriptiä ollenkaan. Katsokaa vain vieritysindikaattorin lukua, joka on selvästi CSS-taika. Mutta voimme tehdä paljon vieritysanimaatioita suoraan CSS: ssä vain yhdellä pienellä JavaScript-tiedon avulla: kuinka pitkälle sivu on vieritetty.
Joten päästetään se pois tieltä. JavaScript-yksirivisellä voimme asettaa mukautetun CSS-ominaisuuden, joka tietää vieritetyn sivun prosenttiosuuden:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);Nyt meillä on --scrollarvo, jota voimme käyttää CSS: ssä.
Tämä temppu tulee Scott Kellumin kautta, joka on varsin CSS-huijausmestari!
Perustetaan animaatio käyttämättä tätä arvoa aluksi. Tämä on yksinkertainen pyörivä animaatio SVG-elementille, joka pyörii ja pyörii ikuisesti:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )Tässä tulee temppu! Keskeytetään nyt tämä animaatio. Sen sijaan, että animoisit sen tietyllä ajanjaksolla, animoimme sen vierityspaikan kautta säätämällä animation-delaysivun vierityksen aikana. Jos arvo animation-durationon 1s, se tarkoittaa sivun koko pituuden vierittämistä. on yksi animaation iterointi.
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); ) Yritä muuttaa animation-durationja 0.5s. Tämä mahdollistaa kahden animaation suorittamisen animation-delaymatematiikan avulla.
Scott totesi alkuperäisessä esittelyssään, että myös asetus:
animation-iteration-count: 1; animation-fill-mode: both;Selvitti joitain "ylitys" outoja ja voin todistaa, että olen nähnyt sen myös, erityisesti lyhyillä näkymillä, joten on myös syytä asettaa ne.
Scott asetti myös vieritykseen liittyvät animaatio-ominaisuudet :root ()itselleen, mikä tarkoittaa, että se pystyi hallitsemaan kaikkia sivun animaatioita kerralla. Tässä on hänen demo, joka ohjaa kolmea animaatiota samanaikaisesti: