JavaScript-bibliotek för coola rullningseffekter

en webbdesign kommer till liv med väl utförd animering. Om du letar efter rätt bibliotek för att lägga till effekter i ditt projekt har jag här gjort en lista över några av de bibliotek som du kan använda för att ge effekter baserat på rullningshändelsen.

när en användare rullar ner på din webbsida kan åtgärden utformas för att utlösa en mängd olika animeringsalternativ som blekningseffekter, oskärpa, 3D, parallax och mer. Det finns 25 JS-bibliotek här som kan hjälpa dig att uppnå den typen av svar i din webbplatsdesign.

Läs Mer: 15 exempel på rullning gjort rätt i webbdesign

bläddra avslöja

ett bibliotek som gör det enkelt att lägga till rullnings animation för både webb och mobil. Du kan ställa in anpassade lättnader, 3D-rotationer, varaktighet och många mor-parametrar till det element du vill animera.

beroenden: ingen | Storlek: 2.9 kb | licens: MIT

Aniview

en plugin som fungerar tillsammans med Animate.CSS för att aktivera animationerna endast när ditt element kommer in i visningsområdet.

beroenden: jQuery / storlek: 1kb / licens: N / A

Fade into View

ett plugin som lägger till fade in / out-effekten till element när de går in eller lämnar förutbestämda vyportar.

beroenden: jQuery | storlek: 3.81 kb | licens: N/A

WOW

WOW kommer att avslöja Animate.css-animationer vid rullningshändelse. Du kan ställa in animationens varaktighet, förseningar, förskjutningar och iterationer direkt från HTML-markeringen, ring bara elementets klass från JS.

Beroenden: Animera.css / storlek: 8.23 kb / licens: MIT

ScrollMagic

denna plugin kommer att visa en ’magisk’ effekt när en användare rullar sidan. Den är perfekt för att animera, fästa ett element eller växla CSS-klass, allt baserat på rullningsposition. ScrollMagic kan arbeta tillsammans med GSAP och VelocityJS att skapa en animation scen. Se hela demos här.

beroenden: jQuery, GSAP, hastighet.js / Storlek: 16.9 kb | licens: MIT

jScrollability

jScrollability kan du skapa enstaka webbsidor med komplexa rullningsbaserade animationer. Vid användarens sroll animeras elementet baserat på rullningspositionerna. Animationer körs baserat på rullningsdjupet, och naturligtvis kan du ställa in start och slut på animeringen.

beroenden: jQuery | storlek: 1.86 kb | licens: MIT

pushIn.js

ett enkelt bibliotek för att lägga till dolly-in eller push-IN effekt till något element som fungerar när en användare rullar genom sidan. Det är enkelt att implementera: lägg bara till start -, Stopp-och hastighetsparametrarna till data-params i ditt HTML-element.

beroenden: ingen / storlek: 4.94 kb / licens: N / A

Scrollissimo

Detta är ett JS-bibliotek för att lägga till smidiga rullningsstyrda animationer. Den använder Greensocks tweens och tidslinjer för att generera mjukare animationer.

Beroenden: GreenShock TweenLite / TweenMax / Storlek: 2.94kb / licens: Ej tillämpligt

jQuery Animation Scroll Plugin

Detta är en jQuery plugin för att lägga visningsutlöst animation med Greensock. Det gör det enkelt att animera element med lättnader, omvandla, skala, rotation och 3D-animationer.

beroenden: jQuery, GreenShock / storlek: 14kb / licens: GNU GPL

Circlr

Circlr kan du skapa rotation animation till ett element, utlöses av rullning, mus händelser eller touch händelser. Det är perfekt att göra en presentation av en produkt som kan ses från alla 360 grader, aktiveras av användaren bläddra.

beroenden: ingen / storlek: 6.05 kb | licens: MIT

Scrollimator

Scrollimator visar positionen och rullningsförloppet och returnerar värden som du kan använda för att ändra Tween-animationer kopplade till användarens rullningsbeteende. Den stöder vertikal och horisontell rullning.

beroenden: ingen / storlek: 37.7 kb / licens: Ej tillämpligt

Crossfade

Crossfade är ett plugin för att lägga till crossfade-effekten i en bild. Den suddiga effekten fortsätter när en användare rullar längre ner.

beroenden: jQuery / storlek: 3.19 kb | licens: MIT

Sidrullningseffekt

den här är ett bibliotek för experimentella sidrullningseffekter skapade av CodyHouse. Den använder velocitey.JS animationer.

beroenden: jQuery, hastighet.js / Storlek: 17.6 kb | licens: N/A

jquery.parallax-scroll

detta bibliotek kan du lägga till jämna en parallax effekt till vertikal sida rullning. Importera bara jQuery och jquery.underlätta.1.3.JS, lägg sedan till attributet 'data-parallax' och valfria patametrar till ditt element för att anpassa effekten.

beroenden: jQuery, jQuery.lättnader / storlek: 8.72 kb / licens: GNU GPL

parallax.JS

Parallax.js är ett enkelt plugin som lägger till parallax-rullningseffekten, inspirerad av Spotify-webbplatsen.

beroenden: jQuery / storlek: 6,63 kb / licens: MIT

Enllax

enllax är ett superlätt bibliotek för användning vid tillämpning av parallax-effekten på alla rullningselement. Du kan ställa in bakgrunds-eller förgrundselement till hav ethis effekt. Det fungerar för både vertikal och horisontell rullning.

beroenden: jQuery | storlek: 1.53 kb | licens: MIT

oskärpa vid rullning

det här biblioteket hjälper dig att lägga till suddighetseffekten i en bild, som utlöses av sidrullning. Ju djupare du rullar ner på sidan, desto mer suddig blir bilden.

beroenden: ingen / Storlek: 1.1 kb / licens: N / A

boxLoader

boxLoader är en enkel plugin för att ladda element på sidan rullning. Parametern du bör ställa in är riktningarna (x eller y), position på procent, effekt och även varaktighet.

beroenden: jQuery / storlek: 3,42 kb / licens: Ej tillämpligt

Tilted Page Scroll

när en användare bläddrar igenom en sida kommer detta plugin att avslöja en fantastisk 3D-lutad effekt på det element du ställer in.

beroenden: jQuery / Storlek: 1.5 kb / licens: GNU GPL

AhRelax

AhRelax ger ett sätt att göra snabba rullningsbaserade animationer. Det är lighweight och har också bra prestanda. Du kan läsa mer om det här.

beroenden: jQuery / storlek: 1,6 kb / licens: MIT

Fancy Scroll

om du någonsin se overflow scroll Effekt på Android eller iOS, med denna plugin kan du nu tillämpa detta på din webbplats. Du kan lägga till en animering, antingen en studs eller glöd, när en användare når toppen/botten av sidan.

beroenden: jQuery | storlek: 2.64 kb | licens: GNU GPL

Parallax image scroll

denna plugin kommer att göra element flyta och flytta som en användare rullar ner eller upp på sidan.

beroenden: jQuery / storlek: 8.69 kb / licens: MIT

Rlsmooth

Detta är ett litet plugin för att skapa den flytande effekten när en användare skriker ner eller upp på sidan. Det finns tre effekter tillgängliga: slide, fade och show.

beroenden: jQuery / storlek: 1,95 kb | licens: MIT

Scrollme

lägger till enkla effekter på sidrullning som skala, rotera, översätta och ändra opacitet av element. Det är lätt att installera: importera bara jQuery, det här pluginet och ställ in animationsparametrarna på elementets markering.

beroenden: jQuery / storlek: 5.45 kb / licens: N / A

Parallax ImageScroll

denna plugin kan du ge en parallax effekt till en bild på din sida. Det använder sig av CSS3 Transform för att få effekten att fungera. Detta plugin har stöd för jQuery och AMD.

beroenden: jQuery / storlek: 8.01 kb | licens: MIT