Rellax.js - Ingyenes parallaxis funkciók Vanilla JavaScript használatával

Parallaxis görgetés hihetetlennek tűnik, ha helyes. Ez nem olyan funkció, amit minden webhelyen szeretne, hanem kreatív oldalak és céloldalak, parallaxis elemek gyorsan megragadja a figyelmet.

Vannak tonna ingyenes JavaScript könyvtárak animált görgetési hatások de sokan dagadtak vagy túlságosan bonyolultak néhány ember számára.

Ezért ajánlom Rellax.js a parallaxis igényeinek megfelelően. Ez egy ingyenes, nyílt forráskódú plugin, amely vanília JavaScriptre épül, így nincs függősége.

Alapértelmezés szerint csak egy egyszerű funkcióhívást igényel a parallaxis osztály hozzárendelése az oldalelemekhez. Ezután, amikor görgetsz, ezek az elemek maradjon rögzítve és mozogjon a felhasználó szemszögéből.

Ezeket az elemeket testreszabhatja úgy, hogy azok közelebb, távolabbra vagy az oldalelemek mögé kerüljenek. Ez létrehozza a a mélység illúziója az oldalon egy egyszerű JavaScript könyvtáron keresztül működik.

Az összes Rellax forráskód ingyenesen elérhető a GitHub-on, ha másolatot szeretne letölteni.

A teljes beállítás egyetlen JS funkciót használ célzás .rellax ilyen osztály:

 var rellax = új Rellax ('. rellax'); 

Ne feledje, hogy elég sokat használhat bármelyik osztályba, de a demó példáját használja .rellax az egyszerűség kedvéért.

Innen csak te csomagolja be a parallaxis elemeket a div .rellax osztály és állítsa be a sebesség attribútumot. Ez a data-rellax sebességű egyéni attribútum, amely -10 és +10 közötti értékeket fogad el.

Itt van egy példa részlet a demóoldal HTML-jéből:

 
 Extra lassú és sima 
 

Te is középpont elemek az oldalon és testreszabhatja az elem pozícióit CSS-en keresztül.

A Rellax nem mondja el, hogyan strukturálhatja az oldalt, vagy hogyan határozhatja meg a CSS elemeket az oldalon. Csak annyit tesz hozzon létre egy természetes parallaxis görgetési hatást tiszta JavaScript. Hogy Ön ezt használja, teljesen rajtad múlik.

A élő demó, vigyázzon a főoldalra, vagy böngésszen a GitHub repóban. Ez tartalmaz néhány dokumentumot, valamint a Rellax.js-t használó élő webhelyekre mutató hivatkozásokat.

És ami a legjobb, a csapat állandóan hajlandó húzási kéréseket tenni, így ha bármilyen problémát észlel, vagy javaslatokat tesz a funkciókhoz, küldjön egy gyors üzenetet a csapatnak.