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

A weblaptervezés életre kelt, jól kivitelezett animációval. Ha a megfelelő könyvtárakat keresed, hogy effektusokat adj hozzá a projektedhez, itt is felsoroltam néhány könyvtárat a görgetési esemény alapján hatásokat adhat meg.

Amikor egy felhasználó görgeti le a weboldalt, a művelet úgy tervezhető, hogy különböző animációs lehetőségeket indítson el például elhalványító hatások, elmosódás, 3D, parallaxis stb. Itt 25 JS könyvtár áll rendelkezésre, amelyek segítenek a webhely kialakításában.

Görgetés A megjelenítés

A könyvtár, amely megkönnyíti a görgető animáció hozzáadását mind a web, mind a mobil számára. Az animálni kívánt elemhez beállíthatja az egyéni könnyítést, a 3D forgatásokat, az időtartamot és számos mor paramétert.

Függőségek: nincs | Méret: 2.9kb | Engedély: MIT

Aniview

Olyan bővítmény, amely együtt működik az Animate.CSS-lel, és csak akkor engedélyezi az animációkat, ha az elem nézetablakba kerül.

Függőségek: jQuery | Méret: 1kb | Engedély: N / A

Fade Into View

Olyan bővítmény, amely az elhúzódó / kimenő hatást hozzáadja az elemekhez, amikor belépnek vagy kilépnek az előre meghatározott nézetablakokból.

Függőségek: jQuery | Méret: 3.81kb | Engedély: N / A

AZTA

A WOW feltárja az Animate.css animációkat a görgetéskor. Az animáció időtartamát, késleltetéseit, eltolódásait és iterációit közvetlenül a HTML-jelölésből állíthatja be, majd hívja az elem osztályát a JS-től.

Függőségek: Animate.css | Méret: 8.23kb | Engedély: MIT

ScrollMagic

Ez a bővítmény „mágikus” hatást fog mutatni, amikor egy felhasználó görgeti az oldalt. Tökéletes az animációhoz, egy elem rögzítéséhez, vagy a CSS osztály átkapcsolásához. A ScrollMagic együtt dolgozhat a GSAP és a VelocityJS segítségével egy animációs jelenet létrehozásában. Lásd a teljes demót itt.

Függőségek: jQuery, GSAP, Velocity.js | Méret: 16.9kb | Engedély: MIT

jScrollability

A jScrollability segítségével egyetlen weboldalt hozhat létre, amely összetett görgetés alapú animációkat tartalmaz. A felhasználói lapozáskor az elem a görgetési pozíciók alapján animálódik. Az animációk a görgetési mélység alapján futnak, és természetesen beállíthatja az animáció kezdetét és végét.

Függőségek: jQuery | Méret: 1,86kb | Engedély: MIT

pushIn.js

Egy egyszerű könyvtár, amely a dolly-in vagy push-in effektet hozzáadja minden olyan elemhez, amely akkor működik, amikor a felhasználó lapozgatja az oldalt. Könnyen kivitelezhető: csak add hozzá a start, stop és sebesség paramétereket data-params a HTML elemhez.

Függőségek: egyik sem | Méret: 4.94kb | Engedély: N / A

Scrollissimo

Ez egy JS könyvtár, amely sima görgetésvezérelt animációkat ad hozzá. A Greensock tweensét és időzítéseit használva simább animációkat hoz létre.

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

jQuery animációs görgető plugin

Ez egy jQuery plugin, amellyel a Greensock segítségével hozzáadhatja a nézetablak-aktivált animációt. Ez megkönnyíti az elemek megkönnyítését a könnyítéssel, átalakítással, méretezéssel, forgatással és 3D-s animációkkal.

Függőségek: jQuery, GreenShock | Méret: 14kb | Engedély: GNU GPL

Circlr

A Circlr lehetővé teszi, hogy a forgatás animációt hozzárendelje egy görgetés, egéresemények vagy érintéses események által kiváltott elemhez. Tökéletes egy termék bemutatásához, amely minden 360 fokból megtekinthető, amelyet a felhasználó görgetése aktivál.

Függőségek: egyik sem | Méret: 6.05kb | Engedély: MIT

Scrollimator

A Scrollimator megmutatja a pozíciót és a görgetés előrehaladását, és visszaadja azokat a értékeket, amelyek segítségével megváltoztathatja a felhasználó görgetési viselkedésével társított animációkat. Támogatja a függőleges és vízszintes görgetést.

Függőségek: egyik sem | Méret: 37,7kb | Engedély: N / A

Crossfade

A Crossfade egy plugin, amely hozzáadja a kereszteződés hatását egy képhez. A homályos hatás tovább folytatódik, ahogy a felhasználó lefelé görget.

Függőségek: jQuery | Méret: 3.19kb | Engedély: MIT

Oldal görgetési hatás

Ez egy könyvtár, amely a CodyHouse által létrehozott kísérleti oldal görgetési effektusokat tartalmazza. Használja velocitey.js animációk.

Függőségek: jQuery, Velocity.js | Méret: 17,6kb | Engedély: N / A

jquery.parallax-scroll

Ez a könyvtár lehetővé teszi, hogy a függőleges lapozáshoz sima parallaxishatást hozzon létre. Csak importálja a jQuery-t és a jquery.easing.1.3.js-t, majd adja hozzá a 'Data-parallaxis' az attribútum és az opcionális paraméterek az elemhez a hatás testreszabásához.

Függőségek: jQuery, jQuery.easing | Méret: 8.72kb | Engedély: GNU GPL

parallax.js

A Parallax.js egy egyszerű plugin, amely hozzáadja a Spalify weboldal ihlette parallaxis görgetési hatást.

Függőségek: jQuery | Méret: 6,63kb | Engedély: MIT

Enllax

Az Enllax egy rendkívül könnyű könyvtár, amely a parallaxishatás bármely görgető elemre való alkalmazására használható. Beállíthatja a háttér vagy az előtér elemeit az etikai hatásnak. Mind függőleges, mind vízszintes görgetéshez használható.

Függőségek: jQuery | Méret: 1,53kb | Engedély: MIT

Blur a görgetésnél

Ez a könyvtár segít abban, hogy hozzáadja az elmosódó hatást egy képhez, amelyet az oldal görgetése aktivál. Minél mélyebbre görgeted az oldalt, annál homályosabb lesz a kép.

Függőségek: egyik sem | Méret: 1.1kb | Engedély: N / A

boxLoader

A boxLoader egy egyszerű plugin az elemek görgetése közben történő betöltéséhez. A beállítandó paraméterek az irányok (x vagy y), pozíció százalékban, hatás és időtartam.

Függőségek: jQuery | Méret: 3.42kb | Engedély: N / A

Döntött oldal görgetés

Ahogy egy felhasználó átugor egy oldalt, ez a bővítmény fantasztikus 3D-s döntött hatást fog mutatni a beállított elemre.

Függőségek: jQuery | Méret: 1.5kb | Engedély: GNU GPL

AhRelax

Az AhRelax lehetővé teszi a gyors görgetéses animációk készítését. Nagy súlya és nagyszerű teljesítménye is van. Itt többet tudhat meg róla.

Függőségek: jQuery | Méret: 1.6kb | Engedély: MIT

Fancy Scroll

Ha valaha látja a túlcsordulás görgetési hatását az Androidon vagy az iOS-en, akkor ez a bővítmény most már alkalmazhatja ezt a webhelyére. Ha egy felhasználó eléri az oldal tetejét / alját, animációt, ugrást vagy ragyogást adhat hozzá.

Függőségek: jQuery | Méret: 2,64kb | Engedély: GNU GPL

Parallaxis kép görgetése

Ez a bővítmény az elemeket úszóvá teszi és mozgatja, ahogy a felhasználó lefelé vagy felfelé görget.

Függőségek: jQuery | Méret: 8.69kb | Engedély: MIT

Rlsmooth

Ez egy kis plugin, amely létrehozza az áramló hatást, amikor egy felhasználó lefelé vagy felfelé lapoz. Három hatás érhető el: csúsztatás, fade és show.

Függőségek: jQuery | Méret: 1,95kb | Engedély: MIT

Scrollme

Egyszerű hatásokat ad az oldal görgetéséhez, például a méretarányhoz, forgatáshoz, fordításhoz és az elemek átlátszóságának megváltoztatásához. Könnyen beállítható: csak importálja a jQuery-t, ezt a bővítményt, és állítsa be az animációs paramétereket az elem jelölésére.

Függőségek: jQuery | Méret: 5.45kb | Engedély: N / A

Parallax ImageScroll

Ez a bővítmény lehetővé teszi, hogy parallaxishatást adjon az oldal bármely képére. Használja a CSS3 Transform-ot a hatás eléréséhez. Ez a bővítmény támogatja a jQuery-t és az AMD-t.

Függőségek: jQuery | Méret: 8.01kb | Engedély: MIT