Kõik perspektiivis: puhas CSS Parallax ja muud kerimisefektid

Järgige neid Codepensi kasutades:

Põhiparallaks
Fikseeritud objektiga paralleel

Vaatamata väidetele, et “parallaks on surnud”, on mõju õigesti rakendades väga elus ja hästi - ja haarav -. Kahjuks on üheksa korda kümnest rakendusest Javascripti tehtud. Kerimisürituste kuulajatega mängimine on jõudluse jaoks riskantne ettevõtmine ja DOM-i muutmine käivitab otseselt tarbetuid uuesti renderdusi, põhjustades räpaseid animatsioone ja kleepuvaid kerimisi. Korrektse parallaksi saab JS abil ära tõmmata. Siit leiate suurepärase artikli, kuidas seda teha:

Kuid lihtsamate keritavate animatsioonide jaoks on puhta CSS-i kasutamine lollikindel ja toimiv lähenemisviis.

Põhiseadistused

Esimese näitena loome parallaksi päise ja staatilise lehe sisuga lehe. Kuna me kraavime Javascripti, pole meil juurdepääsu akna kerimisasendile ja me ei vaja seda! Efekti äravõtmise võti on perspektiivi ärakasutamine. Loome 2 kihti sisu. Sisu, mida soovime aeglasemalt kerida, paigutatakse z-teljel kasutajast „kaugemale”. See sunnib brauserit tegema kõik meie jaoks rasked.

Siin on peamine juurdehindlus:

  
    

Pealkiri

  
  
    

Saidi sisu

  

Täpsustame CSS-i. Peame ütlema brauserile, et kasutada ära perspektiivi piki z-telge. Teeme seda, lisades perspektiivi omaduse oma ümbrisklassi:

perspektiiv: 1 px;

Suurem perspektiivväärtus põhjustab kihtide vahelise kerimiskiiruse suurema erinevuse.

Järgmisena sunnime ümbrist võtma 100% brauseri vaateaknast ja seadma overflow-y automaatseks. See võimaldab ümbrises olevat sisu kerida nagu tavaliselt, kuid järeltulijate kerimiskiirus on nüüd ümbrise perspektiivväärtusega võrreldes:

.wrapper {
  kõrgus: 100vh;
  overflow-x: peidetud;
  overflow-y: auto;
  perspektiiv: 1 px;
}

Esimene jaotis sisaldab meie päise sisu. Pseudo-elemendile rakendatud taustpilt paigutatakse ühe piksli kaugusel kasutajast z-teljel, samal ajal kui sisu on ülejäänud lehega samal tasemel ja kerib normaalse kiirusega.

Päisele rakendatud .sektsiooni klassis ei juhtu midagi liiga erilist. See määratleb kõrguse ja vormindab sisu. Siin on CSS:

.sektsioon {
  kõrgus: 100vh;
  kuva: flex;
  joonda üksused: keskel;
  õigusta-sisu: kese;
  kirjasuurus: 48 pikslit;
  värv: valge;
}

Kogu parallaksi headus juhtub pseudoelemendis:

.parallax :: pärast {
  sisu: " ";
  positsioon: absoluutne;
  ülemine: 0;
  paremal: 0;
  põhi: 0;
  vasakul: 0;
  teisendus: translate Z (-1 px) skaala (2);
  tausta suurus: 100%;
  z-indeks: -1;
  taustpilt: url (link mõnele pildile);
}

Pseudoelement paigutatakse päise sisu taha. translateZ (-1px) määratleb kihi kauguse kasutajast piki z-telge.

Kuna liigutame kihti kaugemale tagasi, näib sisu väiksem (mõelge, mis juhtub, kui teisaldate objekti endast eemale). Selle arvessevõtmiseks peame kihi mõõtkava (2) abil suuruse tagasi suurendama.

Kui teie perspektiiv on seatud 1 pikslile, on kihtide vaikesuuruse muutmise valem järgmine: 1 + (translateZ * -1) / perspektiiv.

Meie puhul vajaks translateZ (-2px) skaalat (3) ja nii edasi…

Lisage päise alla mõni staatiline sisu ja saate ilusa parallaksiafekti, ilma et oleks vaja JS-i!

Siin on selle näite link Codepenile.

Nüüd lõbusa osa jaoks: fikseeritud objektiga Parallax

Põhiline parallaks on suurepärane. See hingab elu muidu staatilisse veebilehte. Kuid CSS-is saab perspektiiviga teha nii palju rohkem. See sai mulle selgeks oma portfelli saidi kerimisanimatsiooni kallal.

Tahtsin, et SVG-legotelliste virn puruneks erineva kiirusega, kui kasutaja mu kodulehte keris. Pärast JS-iga natuke aega ringi ukerdamist mõistsin, et selle efekti saab saavutada puhta CSS-iga - ja olge võised sujuvad!

Idee on luua põhikonteinerisse eraldi objektide kihid, millest igaühel on erinev translateZ väärtus (loe: kerimiskiirus). Selle rakendamisel mõistsin kiiresti, et objektide tõlkimisel ja mõõtmete suurendamisel ei olnud mul mingil moel võimalik jälgida nende x ja y positsioone (need muutuvad objekti translateZ väärtuse suhtes). Selle lahendamiseks pakkisin iga objekti läbipaistvasse konteinerisse, mis sobis kogu ekraaniga. Seejärel saaksin objekti täpselt ümbrisesse paigutada ja kasutada translateZ-i ja skaalat ümbrise asemel objekti enda asemel.

Kõigi objektide suuruse määratlemiseks on vaja ainult ühte .wrapperi klassi:

.objektiümbris {
  positsioon: absoluutne;
  ülemine: 0;
  paremal: 0;
  põhi: 0;
  vasakul: 0;
  taust: puudub;
  õigusta-sisu: kese;
}

Seejärel saab objekti mähistele määratleda ja rakendada erinevaid kiirusi:

.speed-1 {
  teisendus: translate Z (-1 px) skaala (2);
}
.speed-2 {
  teisendamine: translate Z (-2px) skaala (3);
}
.speed-3 {
  teisendamine: translateZ (-3px) skaala (4);
}

Siin on Codepen, mis tutvustab fikseeritud objektiga Parallaksi:

Puhas CSS pakub maailmaruumi sisu animeerimiseks kerimisasendi suhtes - ja parim osa on JS-i kraavimisel jõudluse segadus peaaegu võimatu!

Kui tegemist on etendava parallaksiga, on tegelikult tegemist perspektiiviga.