A parallaxis hatása a tiszta css-re
A CSS parallax hatásának végrehajtása megszünteti ezeket a problémákat, és lehetővé teszi a böngésző számára a hardveres gyorsítás használatát. Az eredmény összhangban áll a képsebességgel, és a görgetés sima. A hatásokat más CSS-szolgáltatásokkal, például médiabérdel vagy támogatókkal is kombinálhatod - és adaptív parallaxot kaphatsz.
Mielőtt belevágnánk a hatás hatására, hozzunk létre valamilyen drótkeret jelölést.
És adja hozzá a stílusokat:
A parallaxis osztály az a hely, ahol mágia fog történni. Meghatároztuk a magassági és perspektivitási tulajdonságokat ehhez az osztályhoz, ezáltal mélyebb hatást hozva létre. A túlcsordulás-y: automatikus tulajdonság lehetővé teszi az elemen belüli tartalmak görgetését a szokásos módon, de most a beágyazott elemek rögzített nézetben fognak megjelenni. Ebben a kulcsfontosságú pillanatban a parallaxis hatásának megteremtésében.
Ezután fontolja meg az osztály parallax__layer-et. Ahogy a neve is sugallja, ez az osztály egy réteget fog meg definiálni azon elemek számára, amelyekre a parallax effektust alkalmazzák. Ez az elem teljesen el van helyezve, és elfoglalja az egész tartályt.
Az egyszerűség kedvéért csak két réteget adtam hozzá különböző sebességgel - továbbiakat adunk hozzá.
Mélységkorrekció
Mivel a parallaxis 3D-transzformációval van létrehozva, egy elem mozgatása a Z-tengely mentén mellékhatással jár - az elemet közelebb mozgatja vagy tovább módosítja a méretét. Ennek megfejtéséhez a skála () transzformációt az elemre kell alkalmazni, majd az eredeti méretben lesz megjelenítve:
A skálafaktor az 1 + (transzlateZ * -1) / perspektíva segítségével számítható ki. Például, ha a perspektivikus tulajdonság 1px, és az elemet -2px-re mozgatják, akkor a skálázási tényező 3:
Rétegsebesség-szabályozás
A réteg sebességét a perspektivikus érték és a Z tengely mentén történő elmozdulás vezérli. A negatív elmozdulási értékekkel rendelkező elemek lassabban mozognak, mint a pozitív értékekkel. Minél tovább van a 0 érték, annál nagyobb a parallaxis hatása (azaz a transzlateZ (-10px) elem tovább lassabb lesz, mint a translateZ (-1px) esetén).
Parallax alfejezetek
Az előző példák azt mutatják be, hogy a parallaxis nagyon egyszerű tartalommal rendelkezik. De a parallaxisok többsége szakaszokra oszlik, amelyek mindegyike függetlenül alkalmazza ezt a hatást. Nézzük meg, hogyan kell csinálni.
Először is szükségünk van egy parallax_group elemre, amelyben csoportosítjuk a rétegeket:
CSS stílusok ehhez az elemhez:
Ebben a példában azt szeretném, hogy minden csoport kitölti a nézetablakot, ezért a magasságot 100vh-ra állítottam, de minden csoportnak szüksége lehet saját értékére. A transzformált stílusú tulajdonság: preservare-3d megakadályozza a gyermekek egy síkbeli igazítását és a helyzetet: a relatív tulajdonság lehetővé teszi, hogy abszolút helyzetben legyenek a gyermekek.
Az elemek csoportosításakor meg kell említenünk egy fontos szabályt, nem tudjuk csökkenteni a csoport tartalmát. A túlcsordulás beállítása: a parallax__group elemre rejtve eltörik a parallaxis hatás. Ez azzal a ténnyel jár, hogy a gyermekelemek túlnyúlhatnak a tartály határain, ezért itt kell rendezni a z-index értékeket a csoportokban úgy, hogy a tartalom helyesen jelenjen meg / rejtve, amikor az oldalt görgetik.
Nincs egyértelmű szabály az elemek rétegzésének leküzdésére, mert A konkrét megvalósítás a tervezéstől függ. A rétegzés hibakeresése sokkal könnyebb, ha láthatja, hogyan működik a parallaxis - egyszerű elemzést alkalmazhat egy elemcsoportra:
Tekintse meg a következő példát, és ne felejtse el ellenőrizni a hibakeresési lehetőséget!
Böngésző támogatás
- A Firefox, a Safari, az Opera és a Chrome támogatja ezt a hatást.
- A Firefoxban enyhe beigazítási probléma merül fel.
- Az IE még nem támogatja a "preservare-3d" tulajdonságot, így a parallaxis hatás nem fog működni. Ez normális, de meg kell győződnie arról, hogy a tartalom helyesen jelenik meg parallaxis nélkül - nos, tudod, a progresszív javulás és mindez!
Talált hibát? Orphus: Ctrl + Enter