Ajánlott, 2024

Szerkesztő Választása

10 legjobb parallaxis görgető plugin

Hosszú görgetési helyek váltak igazán gyakori web design trend. Ennek egyik legmenőbb altípusa a parallaxis görgetési helyek, ahol a képek parallaxishatást adnak. Ahogy a felhasználó lefelé görgeti az oldalt, az animációk ki vannak kapcsolva, és általánosan új megjelenést és érzést ad minden webhelynek, ha helyesen hajtják végre.

A parallaxis görgetőhelyének kialakítása gyakran unalmas, mert mélyreható ismereteket igényel a CSS, a Javascript és a jó webdesign használatával. Itt van egy lista a legjobb parallaxis görgető pluginokról, amelyek nemcsak könnyebbé teszik a parallaxis görgetőhelyek létrehozását, hanem egy jól ápolt parallaxis-hatáskönyvtárat is, hogy könnyebb és gyorsabb legyen egy jó megjelenésű weboldal létrehozása .

JOGI NYILATKOZAT : Mielőtt elkezdené, vegye figyelembe, hogy ezeknek a plugineknek a használatához szükséges a webes technológiák (HTML / CSS / Javascript) ismerete. A felsorolt ​​bővítmények többsége jqueryt használ, így a Jquery ismerete is szükséges lehet.

Parallaxis görgetési bővítmények

1. ScrollMagic

A ScrollMagic az egyik legkedveltebb és leginkább gazdag jquery plugin. Ez a javascript könyvtár lehetővé teszi látszólag varázslatos görgetési hatások létrehozását. A ScrollMagic használatával animálhatja a görgetési pozícióját. Ez azt jelenti, hogy a HTML elemeket rögzítheti, mozgathatja vagy animálhatja, amikor görgetés közben bármilyen időtartamra szeretne, és könnyen hozzáadhat parallaxishatásokat a webhelyére. Rendkívül testreszabható és könnyű (6kb, ha gzippel). A parallaxis görgető pluginek között a Scroll Magic rendelkezik a legjobb dokumentációval és külső erőforrásokkal. Tökéletesen kompatibilis a mobilral is.

A ScrollMagic számos példát tartalmaz. Nézze meg őket, hogy inspiráljon és útmutatást kapjon a könyvtár használatával kapcsolatban.

Ról ről:

Honlap: //janpaepke.github.io/ScrollMagic/

Készítette: Jan Paepke

Telepítés:

1. CDN:

2. Letöltés Githubból

2. skrollr

A skrollr egy könnyű, tiszta Javascript és CSS könyvtár, amely nem tartalmaz jQuery-t. Alapvetően a CSS-re egyszerűsített Scroll Magic. A skrollr használatához nem kell ismernie a Javascript-et vagy a jQuery-t. Csak HTML és CSS elég. A skrollr adat attribútumokat használ a tetszőleges HTML-elem animálásához. A skrollr egyik fő hátránya, hogy az animációk csak az oldal görgetése közben működnek. Ellenkező esetben az összes hatás visszatartásra kerül. A skrollr lehetővé teszi, hogy animálja az összes CSS-tulajdonságot a HTML-elemekben.

Ról ről:

Honlap: //prinzhorn.github.io/skrollr/

Készítette: Prinzhorn

Telepítés: Letöltés a Github-ból

3. pagePiling.js

Az oldalcsomagolás egy jQuery plugin, amely lehetővé teszi, hogy webhelyét különböző részekre hozza létre, amelyek egymás tetejére haladnak. Görgetés vagy az URL-cím elérése után minden szakasz egy szép csúszó animációban jelenik meg. pagePiling.js kompatibilis minden platformtal - asztali, tablet és mobil -, és a legtöbb böngészővel működik. Kíméletesen lebomlik olyan régebbi böngészőkön, amelyek nem támogatják az animációkat (pl. IE 7). A bővítmény használatához CSS-t és Javascript-fájlt kell tartalmaznia a HTML-ben. A pagePiling.js-t a (dokumentum). már funkciója inicializálja:

$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});

A fejlettebb inicializálásokhoz menjen át a README.md.

Ról ről:

Honlap: //alvarotrigo.com/pagePiling/

Készítette: alvarotrigo

Telepítés: Letöltés a Github-ból

4. Alton

Az Alton egy jQuery 'scroll-jacking nekünk' plugin. A görgetés közbeni emelés azt jelenti, hogy a böngésző natív görgetése le van tiltva a célzott görgetés mellett, amely (az egérkerék vagy az érintőpad segítségével) a képernyő következő függőleges pontjára, vagy a következő tartály tetejére lép.

Az Alton három különféle funkciót kínál, a „Hero”, a „Bookend” és a „Standard”. A Standard lehetővé teszi a teljes lapozás görgetését, mindegyik 100% -os magassággal. A görgetés a következő részt vagy az előző szakaszt mutatja. A Bookend lehetővé teszi, hogy készítsen könyvvizsgálói élményt, míg a Hero lehetővé teszi, hogy csak a "Hős" szekciót görgethesse, a többi oldal pedig (újrakezdte) natív görgetést.

Ról ről:

Honlap: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/

Készítette: papír-levél

Telepítés: Letöltés a Github-ból

5. Stellar.js

A Stellar egy jQuery plugin, amellyel könnyen hozzáadhat parallaxis görgetési effektusokat. A futtatáshoz először futtatni kell a $ .stellar () függvényt. Az egyes elemek animációs beállításai konfigurálhatók az adott elem adatattribútumaival.

A csillagok akár parallaxis hátterűek is, amelyek hátterek a görgetésen. A Stellar.js egyik leghasznosabb funkciója az ellentételezés.

Minden elem visszatér az eredeti pozícióba, amikor eltolt szülőjük megfelel a képernyő szélének - plusz vagy mínusz a saját opcionális eltolás. Ez lehetővé teszi, hogy bonyolult parallaxismintákat hozzon létre nagyon könnyen. (Stellar dokumentáció)

Ról ről:

Honlap: //markdalgleish.com/projects/stellar.js/

Készítette: Mark Dalgeish

Telepítés: Letöltés a Github-ból

6. multiScroll.js

Ezt a bővítményt ugyanaz a fejlesztő (alvarotrigo) hozza létre, aki az PagePiling.js bővítményt készítette. Ami a többgörgetés alapjait jelenti, lehetővé teszi, hogy olyan hatást fejtsen ki, ahol az egyes oldalszakaszok két megosztott részbe töltenek, amelyek az oldal betöltésekor a helyükre csúsznak. Nézze meg a honlapot, hogy lássa, mi ez a böngészőn. A multiScroll.js segítségével beállíthatja a görgetési sebességet, a könnyítést, a billentyűzet görgetési opcióját és még sok más tulajdonságot, így testreszabhatja a hatást, hogy pontosan hogyan kell.

Ról ről:

Honlap: //alvarotrigo.com/multiScroll/

Készítette: alvarotrigo

Telepítés: Letöltés a Github-ból

7. ScrollMe

A ScrollMe plugin egyszerű parallaxis görgetési effektusok hozzáadásához. A lapozás lefelé görgetésével, elforgatásával, lefordításával és az oldalak átlátszatlanságának módosításával. A ScrollMe nem igényel Javascript-et, és csak a CSS ismerete elég. Az „animateme” osztály és a szükséges adatattribútumok hozzáadásával bármilyen HTML elemet animálhat. A ScrollMe-t leginkább CSS-effektusok hozzáadására használják. Könnyű és minden animáció sima, mindaddig, amíg mérsékelten használja őket.

Ról ről:

Honlap: //scrollme.nckprsn.com/

Készítette: Nick Pearson

Telepítés: Letöltés a Github-ból

8. Parallax görgetés

A Parallax Scroll egy könnyen használható jQuery plugin, amely lehetővé teszi a parallaxis görgetőhatás létrehozását a Spotify-hoz hasonló webhelyeken. Egyszerűen használható - csak adja meg a kívánt CSS osztályokat a képtartók számára. Ahelyett, hogy használnánk címkék használatához a plugin használatához olyan háttérképet használó elemeket kell használnia (a "background-image" CSS tulajdonság használatával.) Az elemeket a CSS @ media lekérdezések segítségével választhatja ki.

Ról ről:

Honlap: //parallax-scroll.aenism.com/

Készítette: Aen

Telepítés: Letöltés a Github-ból

9. Jarallax

A Jarallax egy CSS és Javascript könyvtár, amely parallaxis görgetési hatásokra specializálódott. A Jarallax a Javascript használatával van konfigurálva (No jQuery, csak tiszta vanilla JS). Támogatja a simított görgetési funkciókat, megkönnyíti és javítja a parallaxis animációt. A Jarallaxot a legtöbb böngésző támogatja a platformokon. A Jarallax weboldala kiváló dokumentációval rendelkezik a Jarallax testreszabására az Ön igényeinek megfelelően. A Jarallax videó-oktatóanyagokat is tartalmaz, amelyek bemutatják, hogyan állíthatja be a Jarallaxot a webhelyére és hogyan kezdheti meg.

Ról ről:

Honlap: //www.jarallax.com/

Készítette: Jarallax

Telepítés: Letöltés a Jarallax weboldaláról

10. Superscrollorama

A Superscrollorama egy olyan jQuery alapú plugin, amely támogatja a görgető animációkat. A TweenMax és a Greensock Tweening Engine táplálja az animációs teljesítményt és a simaságot. A Superscrollorama animációkat jQuery segítségével hívják, és a legtöbb TweenMax.js funkciót is használhatja. Sajnos ezek az animációk nem támogatottak teljes mértékben a mobil eszközök által (mert az érintőképernyős készülékek más módon kezelik a görgetést). A setScrollContainerOffset módszerrel azonban a Superscrollorama effektek mobil eszközökön érhetők el.

Itt van a következő kód:

.setScrollContainerOffset(x, y)

(x: a scrollcontainer x értéke, y: a scrollcontainer x eltolása)

Ról ről:

Honlap: //johnpolacek.github.io/superscrollorama/

Készítette: johnpolacek

Telepítés: Letöltés a Github-ból

LÁSD MÉG: 10 Best Static Site Generators

Top