Kaikki näkökulmasta: Pure CSS Parallax ja muut vieritystehosteet

Seuraa näitä Codepens -sovelluksia:

Perusparallaksi
Kiinteä objekti Parallax

Huolimatta väitteistä, että ”parallaksi on kuollut”, vaikutus on hyvin elossa ja hyvin - ja kiehtova - oikein toteutettuna. Valitettavasti yhdeksän kertaa kymmenestä, toteutus on botched Javascript. Pelaaminen vieritystapahtuman kuuntelijoiden kanssa on riskialtista suorituskykyä, ja DOM: n muuttaminen laukaisee suoraan tarpeettomia uudelleentoistoja, aiheuttaen katkonaisia ​​animaatioita ja tarttuvia vierityksiä. Oikea parallaksi voidaan vetää pois JS: llä. Tässä on erinomainen artikkeli siitä, miten se tulisi tehdä:

Mutta yksinkertaisemmille vieriville animaatioille puhtaan CSS: n käyttö on järkevä, suorittava lähestymistapa.

Perusasetukset

Ensimmäisenä esimerkkinä luomme sivun, jolla on parallaksi otsikko ja staattinen sivun sisältö. Koska ajamme Javascriptiä, meillä ei ole pääsyä ikkunan vieritysasentoon, emmekä me sitä tarvitse! Avain efektin vetämiseen on perspektiivin hyödyntäminen. Luomme 2 kerrosta sisältöä. Sisältö, jota haluamme vierittää hitaammin, sijoitetaan “kauempana” käyttäjästä z-akselilla. Tämä pakottaa selaimen tekemään kaiken raskaan nostamisen meille.

Tässä on perusmerkintä:

  
    

Nimike      
    

Sivuston sisältö

  

Tarkastellaan CSS: tä. Meidän on kerrottava selaimelle hyödyntääksesi perspektiiviä z-akselilla. Teemme tämän lisäämällä perspektiiviominaisuuden kääreluokkaan:

perspektiivi: 1px;

Suurempi perspektiiviarvo aiheuttaa suuremman eron kerrosten vieritysnopeuksissa.

Seuraavaksi pakotamme kääre ottamaan 100% selaimen näkymästä ja asettamaan ylivuoto-y: n automaattiseksi. Tämä antaa kääressä olevan sisällön vierittää normaalisti, mutta jälkeläisten vieritysnopeus on nyt suhteessa kääreen perspektiiviarvoon:

.wrapper {
  korkeus: 100vh;
  ylivuoto-x: piilotettu;
  ylivuoto-y: auto;
  perspektiivi: 1px;
}

Ensimmäinen div-osasto sisältää otsikkosisällön. Pseudoelementtiin sovellettu taustakuva sijoitetaan yhden pikselin päässä "käyttäjästä" z-akselilla, kun taas sisältö on yhdenmukainen muun sivun kanssa ja selaa normaalilla nopeudella.

Otsikkoon sovellettavassa.-Luokassa ei tapahdu mitään erityistä. Se määrittelee korkeuden ja muotoilee sisällön. Tässä on CSS:

.jakso {
  korkeus: 100vh;
  näyttö: flex;
  Kohdista tuotteet: keskusta;
  perustele sisältö: keskusta;
  fonttikoko: 48px;
  väri valkoinen;
}

Kaikki parallaksihyvyys tapahtuu pseudo-elementissä:

.parallax :: jälkeen {
  sisältö: "";
  asema: ehdoton;
  alkuun: 0;
  oikea: 0;
  pohja: 0;
  vasen: 0;
  muunnos: translateZ (-1 px) -asteikko (2);
  taustakoko: 100%;
  z-indeksi: -1;
  taustakuva: url (linkki johonkin kuvaan);
}

Pseudo-elementti sijoitetaan otsikon sisällön taakse. translateZ (-1px) määrittelee kerroksen etäisyyden käyttäjästä z-akselia pitkin.

Koska siirrämme kerrosta taaksepäin, sisältö näyttää pienemmältä (ajattele, mitä tapahtuu, kun siirrät esineen pois sinusta). Tämän huomioon ottamiseksi meidän on mitoitettava kerros takaisin kokoon käyttämällä mittakaavaa (2).

Jos perspektiivi on asetettu 1 pikseliin, kaava tasojen palauttamiseksi takaisin oletuskokoonsa on: 1 + (translateZ * -1) / perspektiivi.

Meidän tapauksessamme translateZ (-2px) vaatisi asteikkoa (3) ja niin edelleen…

Lisää otsikon alle staattista sisältöä ja saat kauniin rinnakkaisilmiön ilman JS: ää!

Tässä on linkki Codepeniin esimerkissä.

Nyt hauskanpuolena: Kiinteä objekti Parallax

Perus parallaksi on hieno. Se hengittää elämää muuten staattiselle verkkosivulle. Mutta voit tehdä niin paljon enemmän näkökulmasta CSS: ssä. Tämä tuli minulle selväksi työskennellessäni vierianimaation kanssa portfoliosivustolleni.

Halusin pino SVG-lego-tiiliä hajoamaan eri nopeuksilla, kun käyttäjä vieritti alas kotisivuni. Jälkennytään jonkin aikaa JS: n kanssa, tajusin, että tämä vaikutus voidaan saavuttaa puhtaalla CSS: llä - ja ole voinen sileä siinä!

Ajatuksena on luoda erilliset objektikerrokset isäntäsäiliöön, jokaisella on erilainen translateZ-arvo (lue: vieritysnopeus). Toteuttaessani tätä, huomasin nopeasti, että objektien kääntämisessä ja skaalaamisessa minulla ei ollut tapaa seurata niiden x- ja y-sijainteja (ne muuttuisivat objektin translateZ-arvoon nähden). Tämän ratkaisemiseksi kääritin jokaisen objektin selkeään säiliöön, joka sopii koko näytölle. Pystyin sitten sijoittamaan esineen tarkalleen kääreeseen ja levittämään translateZ: n ja mittakaavan kääreeseen itse esineen sijaan.

Vain yksi .wrapper-luokka tarvitaan kaikkien objektien koon määrittelemiseen:

.object-wrapper {
  asema: ehdoton;
  alkuun: 0;
  oikea: 0;
  pohja: 0;
  vasen: 0;
  tausta: ei mitään;
  perustele sisältö: keskusta;
}

Eri nopeudet voidaan sitten määritellä ja soveltaa esineiden kääreihin:

.speed-1 {
  muunnos: translateZ (-1 px) -asteikko (2);
}
.speed-2 {
  muunnos: translateZ (-2px) -asteikko (3);
}
.speed-3 {
  muunnos: translateZ (-3px) -asteikko (4);
}

Tässä on Codepen, joka esittelee kiinteän objektin paralaksia:

Pure CSS tarjoaa maailman mahdollisuuksia animoida sisältöä suhteessa vieritysasentoon - ja parasta on JS: n ojittamisessa melkein mahdotonta sekoittaa suorituskykyä!

Kun kyse on esiintyvästä parallaksista, siinä todella on kyse perspektiivistä.