Bevezetés a parallaxis görgetés
Mi parallaxis görgetés?
Parallax skrollling magában háttér, sebességgel mozog eltér a sebesség tartalom, ami egy görgetés az oldal 3D-hatást. Ez a hatás lehet kiváló kiegészítője minden honlapon, de sajnos, a visszaélés irritáló. Időről időre találkoznak oldalakat épült teljes egészében ezt a hatást, és inkább a tapasztalat az ilyen helyek nem túl kedvező. És mindez azért, mert a parallaxis hatás általában animál a kép a háttérben, a teljes súlyát a helyszínen is jelentősen megnövekedett, és ennek eredményeként a helyszínen lassan töltődik.
Néhány példa az ilyen jellegű visszaélések, véleményem szerint, a Saukoni weboldal, amely bemutatta a Kinvara 3 és Oakley - én legyőzhetetlen honlapján. akinek az egész 20 MB (régebben körülbelül 50 MB!).
Most, hogy van egy ötlete, amit úgy néz ki, mint a hatása, lássuk, hogyan tudjuk használni Stellar.js, hogy újra azt.
Mi Stellar.js
Stellar.js - egy jQuery plugin, ami lehetővé teszi, hogy könnyen hozzá parallaxis görgetés hatással a webhelyére. Annak ellenére, hogy a projekt már nem támogatja, a dugó még mindig stabil és kompatibilis a legújabb változata jQuery; a fejlesztők saját telek. Ez jQuery plugin népszerű a nyilvántartásban a jQuery plugin. és akkor valószínűleg már hallott róla.
Most, miután a leírás a plugin, nézzük meg, hogyan lehet használni a webhelyen.
Az első lépések a Stellar.js
Az első lépések a Stellar.js igen egyszerű. Először töltse le a plug-in, és csatlakoztassa az oldalon.
Most az oldal készen áll együttműködni a plugin, hogy végre parallaxis hatást. Plug hatása lehetővé teszi, hogy alkalmazni kell minden olyan elemet egy görgethető oldalon, például, hogy az objektum ablak stb Erre a select elem jQuery majd nevezni csillag () metódust.
A minimális kód, amely ezt a könyvtárat a window objektum az alábbiakban mutatjuk be:
Window objektum könyvtár is rendelkezik egy rövid megjegyzés:
Ebben az esetben a könyvtár keres parallaxis háttérrel vagy elemek egy adott elem és változtatják a helyzetüket, ha görgethető elem.
Ha szeretné látni a munkát Stellar.js plugin végre a parallaxis hatást, ha görgetés az oldal, megnézzük azt.
Stellar.js. valamint sok más plug-in, jól irányított. Sőt, akkor bizonyos paramétereket, és konfigurálja a bővítményt, igényektől függően. Stellar.js lehetővé teszi, hogy mind az általános beállításokat az összes elem, és a beállításokat minden egyes tételt külön-külön. Általános beállítások átkerülnek a csillagok () módszer; lehetőségeket az adott elem által meghatározott adatok * attribútumai (adat tulajdonság). Ebben a részben azt nem fogja figyelembe venni az összes lehetőséget, de lehet olvasni róluk a leírásban.
Az első fő opció határozza meg az irányt a hatása. Klasszikus görgetés hatásának alapja a tekercset felülről lefelé vagy fordítva, de akkor is meg a görgetés balról jobbra és fordítva, vagy mindkettő. Ehhez akkor a két logikai tulajdonságait horizontalScrolling és verticalScrolling. Számukra az alapértelmezett érték true.
Egy másik érdekes lehetőség reagál. Frissíti a parallaxis tartalom betöltése oldalak és átméretezni az ablakot. Az alapértelmezett érték hamis.
Az egyes elemek esetében leggyakrabban használt tulajdonság az adatok csillagszerű-háttér-arányt. Ez a tulajdonság pozitívan érték, mint a szám, és megváltoztathatja a sebességet a hatás a betonelem. Például az adatok csillagszerű-háttér-arány = «0,5» azt jelenti, hogy az elem egyenlő lesz a fele a sebesség a tényleges sebesség a görgetés. Ha azt szeretnénk, hogy ezt az attribútumot, amelynek értéke kevesebb, mint 1-ce, a dokumentáció azt javasolja, background-attachment: fixed; (Fix érték, hogy a háttérkép fix elem: a háttérkép nem görgethető, ellentétben tartalmi elem) a stílus a tételt.
Tudván, hogy mi teszi a plug-in, és hogyan kell beállítani, folytassa fontolóra tényleges példát.
Ebben a részben fogunk létrehozni egy működő példa alapján Stellar.js bővítményt a lehetőségeket a fent tárgyalt. Először létre kell hoznia elrendezés din. A következő példában létrehozunk egy szöveg blokk 6.
A végső CSS így néz ki:
Végül, meg kell végigmenni a hatás a hívás csillag () metódust. Ebben a példában azt is meg néhány lehetőség van:
Élő példa a fenti kód az alábbi ábrán látható: