JavaScript könyvtárak a hűvös görgetési effektusokhoz

a weboldal kialakítása jól végrehajtott animációval életre kel. Ha megfelelő könyvtárakat keres effektusok hozzáadásához a projekthez, Itt készítettem egy listát azokról a könyvtárakról, amelyekkel effektusokat adhat a görgetési esemény alapján.

amikor a felhasználó lefelé görgeti a weboldalt, a művelet úgy alakítható ki, hogy különféle animációs lehetőségeket indítson el, például elhalványulási effektusokat, elmosódást, 3D-t, parallaxist stb. Vannak 25 JS könyvtárak itt, amelyek segíthetnek elérni ezt a fajta választ a webhely tervezésében.

Olvass tovább: 15 példa a görgetésre közvetlenül a webdesignban

Scroll Reveal

a könyvtár, amely megkönnyíti a scroll animáció hozzáadását mind a webes, mind a mobil számára. Beállíthat egyéni lazítást, 3D forgatásokat, időtartamot és sok Mor paramétert az animálni kívánt elemhez.

függőségek: nincs | Méret: 2.9 kb | licenc: MIT

Aniview

a plugin, amely együttműködik Animate.CSS, hogy az animációk csak akkor, ha az elem jön a nézetablakban.

függőségek: jQuery / méret: 1KB / licenc: Nincs adat

Fade into View

egy plugin, amely hozzáadja a fade in / out hatást az elemekhez, amikor előre meghatározott nézetablakokba lépnek vagy kilépnek.

függőségek: jQuery | méret: 3.81 kb | licenc: N/A

WOW

WOW felfedi animálni.css animációk után scroll esemény. Beállíthatja az animáció időtartamát, a késéseket, az eltolásokat és az iterációkat közvetlenül a HTML jelölésből, majd csak hívja az elem osztályát a JS-ből.

Függőségek: Animálni.css / méret: 8.23 kb / licenc: MIT

ScrollMagic

ez a plugin ‘mágikus’ hatást mutat, amikor a felhasználó görgeti az oldalt. Tökéletes egy elem animálásához, rögzítéséhez vagy CSS osztály váltásához, mindez a görgetési pozíció alapján. A ScrollMagic együttműködik a GSAP és a VelocityJS segítségével egy animációs jelenet létrehozásában. Lásd a teljes demókat itt.

függőségek: jQuery, GSAP, sebesség.js | Méret: 16.9 kb / licenc: MIT

jScrollability

a jScrollability lehetővé teszi, hogy egyetlen weboldalt hozzon létre összetett görgetés alapú animációkkal. Amikor a felhasználó sroll, az elem animálni alapján scroll pozíciókat. Az animációk a görgetési mélység alapján futnak, és természetesen beállíthatjuk az animáció kezdetét és végét.

függőségek: jQuery | méret: 1,86 kb | licenc: MIT

pushIn.js

egy egyszerű könyvtár a dolly-in vagy push-IN effektus hozzáadásához bármely elemhez, amely akkor működik, amikor a felhasználó végiggörgeti az oldalt. Könnyen megvalósítható: csak adja hozzá a start, stop és speed paramétereket a data-params – hez a HTML elemhez.

függőségek: nincs / méret: 4.94 kb / licenc: N / A

Scrollissimo

ez egy JS könyvtár sima görgetésvezérelt animációk hozzáadásához. Ez hasznosítja a Greensock a tweens and timelines generálni simább animációk.

Függőségek: GreenShock TweenLite/TweenMax | Méret: 2.94kb / Engedély: Nincs adat

jQuery Animation Scroll Plugin

ez egy jQuery plugin hozzá nézetablak által kiváltott animáció segítségével Greensock. Megkönnyíti az elemek animálását a lazítás, átalakítás, méretezés, forgatás és 3D animációk segítségével.

függőségek: jQuery, GreenShock / méret: 14KB / licenc: GNU GPL

Circlr

Circlr lehetővé teszi, hogy a forgatás animáció egy elem, által kiváltott görgetés, egér események vagy touch eseményeket. Ez tökéletes, hogy egy kirakat egy termék, amely megtekinthető mind a 360 fok, aktivált felhasználó scroll.

függőségek: nincs / méret: 6.05 kb / licenc: MIT

Scrollimator

a Scrollimator megmutatja a pozíciót és a görgetés előrehaladását, valamint a visszatérési értékeket, amelyekkel megváltoztathatja a felhasználói görgetési viselkedéshez csatolt animációkat. Támogatja a függőleges és vízszintes görgetést.

függőségek: nincs / méret: 37,7 kb / licenc: Nincs adat

Crossfade

Crossfade egy plugin hozzá a crossfade hatás egy képet. Az elmosódott hatás folytatódik, amikor a Felhasználó tovább görget.

függőségek: jQuery / méret: 3.19 kb / licenc: MIT

Page Scroll Effect

ez egy könyvtár kísérleti oldal scroll hatások által létrehozott CodyHouse. Ez használ velocitey.js animációk.

függőségek: jQuery, Velocity.js | méret: 17,6 kb/licenc: N / A

jquery.parallaxis-scroll

ez a könyvtár lehetővé teszi, hogy sima parallaxis hatást adjon a függőleges oldalgörgetéshez. Csak importálja a jQuery-t és a jquery-t.lazítok.1.3.js, majd adja hozzá a 'data-parallax' attribútumot és az opcionális patamétereket az elemhez a hatás testreszabásához.

függőségek: jQuery, jQuery.lazítás / méret: 8.72 kb / licenc: GNU GPL

parallaxis.js

parallaxis.a js egy egyszerű plugin, amely hozzáadja a parallaxis görgetési hatást, amelyet a Spotify webhely ihlette.

függőségek: jQuery / méret: 6,63 kb | licenc: MIT

Enllax

az Enllax egy szuper könnyű könyvtár, amely a parallaxis effektus bármely görgető elemre történő alkalmazásához használható. Beállíthatjuk, háttér vagy előtér elemek hav ethis hatást. Mind függőleges, mind vízszintes görgetéshez működik.

függőségek: jQuery | méret: 1.53 kb | licenc: MIT

elmosódás görgetéskor

ez a könyvtár segít hozzáadni az elmosódás hatását egy képhez, amelyet az oldal görgetése vált ki. Minél mélyebben görgeti le az oldalt, annál homályosabbá válik a kép.

függőségek: nincs / Méret: 1.1 kb / licenc: N / A

boxLoader

boxLoader egy egyszerű plugin betölteni elemek után oldal görgetés. A paraméter, amelyet be kell állítania, az irányok (x vagy y), a százalékos pozíció, a hatás és az időtartam.

függőségek: jQuery / méret: 3.42 kb | licenc: Nincs adat

döntött oldal görgetés

ahogy a felhasználó végiggörgeti az oldalt, ez a plugin egy fantasztikus 3D-s döntött hatást mutat a beállított elemre.

függőségek: jQuery / Méret: 1.5 kb | licenc: GNU GPL

AhRelax

AhRelax egy módja annak, hogy gyors scroll-alapú animációk. Ez lighweight és nagy teljesítményt. Itt olvashat róla többet.

függőségek: jQuery / méret: 1,6 kb | licenc: MIT

Fancy Scroll

ha valaha is látni a túlcsordulás scroll hatása Android vagy iOS, ezzel a plugin akkor most alkalmazni ezt a webhelyen. Hozzáadhat animációt, akár visszapattanást, akár ragyogást, amikor a felhasználó eléri az oldal tetejét/alját.

függőségek: jQuery | méret: 2.64 kb | licenc: GNU GPL

parallaxis image scroll

ez a plugin teszi elemek lebegnek, és mozog, mint a felhasználó görgeti le vagy fel az oldalt.

függőségek: jQuery / méret: 8,69 kb | licenc: MIT

Rlsmooth

ez egy kis plugin, amely létrehozza az áramló hatást, amikor a felhasználó lefelé vagy felfelé fordul az oldalon. Három hatás érhető el: slide, fade és show.

függőségek: jQuery / méret: 1.95 kb / licenc: MIT

Scrollme

egyszerű effektusokat ad az oldalgörgetéshez, például méretezést, forgatást, fordítást és az elemek átlátszatlanságának megváltoztatását. Könnyen beállítható: csak importálja a jQuery-t, ezt a plugint, és állítsa be az animációs paramétereket az elem jelölésére.

függőségek: jQuery / méret: 5.45 kb / licenc: Nincs adat

parallaxis ImageScroll

ez a plugin lehetővé teszi, hogy parallaxis hatást adjon az oldal bármely képének. Használja a CSS3 transzformációt, hogy a hatás működjön. Ez a plugin támogatja a jQuery és az AMD.

függőségek: jQuery / méret: 8.01 kb / licenc: MIT