JavaScript-bibliotek för Cool Scrolling Effects

En webbplatsdesign kommer till liv med väl genomförd animering. Om du letar efter de rätta biblioteken för att lägga till effekter på ditt projekt, här har jag gjort en lista över några av de bibliotek som du kan använda för att ge effekter baserat på bläddra händelsen.

När en användare rullar ner din webbsida, åtgärden kan utformas för att utlösa en mängd olika animeringsalternativ såsom bleknaffekter, suddighet, 3D, parallax och mer. Det finns 25 JS-bibliotek här som kan hjälpa dig att uppnå det slags svaret i din webbdesign.

Scroll Reveal

Ett bibliotek som gör det enkelt att lägga till rullanimering för både webb och mobil. Du kan ställa in anpassad lättnad, 3D-rotation, varaktighet och många morparametrar till det element du vill animera.

beroenden: ingen | Storlek: 2,9kb | Licens: MIT

Aniview

Ett plugin som fungerar tillsammans med Animate.CSS för att aktivera animationerna endast när ditt element kommer in i visningsporten.

beroenden: jQuery | Storlek: 1kb | Licens: N / A

Fade Into View

Ett plugin som lägger till in / ut effekten till element när de anger eller avslutar förutbestämda visningsportar.

beroenden: jQuery | Storlek: 3.81kb | Licens: N / A

WOW

WOW kommer att avslöja Animate.css-animationer vid bläddra händelse. Du kan ställa in animationsvaraktigheten, fördröjningarna, förskjutningarna och iterationerna direkt från HTML-markeringen, ring bara elementets klass från JS.

beroenden: Animate.css | Storlek: 8.23kb | Licens: MIT

ScrollMagic

Denna plugin visar en "Magical" -effekt när en användare rullar sidan. Det är perfekt för att animera, fastställa ett element eller växla CSS-klass, allt baserat på rullningsläge. ScrollMagic kan fungera tillsammans med GSAP och VelocityJS för att skapa en animationsscene. Se fullständiga demos här.

beroenden: jQuery, GSAP, Velocity.js | Storlek: 16,9kb | Licens: MIT

jScrollability

jScrollability kan du skapa enkla webbsidor med komplexa rullbaserade animeringar. Vid användarrollen kommer elementet att animera baserat på rullningspositionerna. Animationer körs baserat på rulldjupet och du kan naturligtvis ange start och slut på animationen.

beroenden: jQuery | Storlek: 1,86kb | Licens: MIT

pushIn.js

Ett enkelt bibliotek för att lägga till dolly-in eller push-in-effekten till något element som fungerar när en användare rullar igenom sidan. Det är enkelt att implementera: lägg bara till start, stopp och hastighetsparametrar till data params till ditt HTML-element.

beroenden: ingen | Storlek: 4.94kb | Licens: N / A

Scrollissimo

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

beroenden: GreenShock TweenLite / TweenMax | Storlek: 2,94kb | Licens: N / A

jQuery Animation Scroll Plugin

Det här är ett jQuery-plugin för att lägga till visningsutlösad animering med Greensock. Det gör det enkelt att animera element med lättnad, transformation, skala, rotation och 3D-animeringar.

beroenden: jQuery, GreenShock | Storlek: 14kb | Licens: GNU GPL

Circlr

Circlr låter dig skapa rotationsanimering till ett element som utlöses av rullning, mushändelser eller beröringshändelser. Det är perfekt att göra en presentation av en produkt som kan ses från alla 360 grader, aktiverad av användarrollen.

beroenden: ingen | Storlek: 6.05kb | Licens: MIT

Scrollimator

Scrollimator visar dig positionen och bläddra framsteg, och returnerar värden som du kan använda för att ändra mellan animationer som är kopplade till användarens bläddringsbeteende. Den stöder vertikal och horisontell rullning.

beroenden: ingen | Storlek: 37,7kb | Licens: N / A

crossfade

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

beroenden: jQuery | Storlek: 3,19kb | Licens: MIT

Sidrullningseffekt

Den här är ett bibliotek för experimentella sidrulleffekter skapade av CodyHouse. Det utnyttjar velocitey.js animationer.

beroenden: jQuery, Velocity.js | Storlek: 17,6kb | Licens: N / A

jquery.parallax-scroll

Med det här biblioteket kan du lägga till en jämn parallell effekt för vertikal sidrullning. Importera bara jQuery och jquery.easing.1.3.js, lägg sedan till 'Data parallax' attribut och valfria patametrar till ditt element för att anpassa effekten.

beroenden: jQuery, jQuery.easing | Storlek: 8,72kb | 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 super lätt bibliotek för användning vid tillämpning av parallax-effekten på något rullningselement. Du kan ställa in bakgrunds- eller förgrundselement för att ha etisk effekt. Den fungerar både för vertikal och horisontell rullning.

beroenden: jQuery | Storlek: 1,53 kb | Licens: MIT

Blur på rullning

Det här biblioteket hjälper dig att lägga till oskärpaffekten på en bild som kommer att utlösas av sidrullning. Ju djupare du rullar ner på sidan, desto suddigare blir bilden.

beroenden: ingen | Storlek: 1,1kb | Licens: N / A

boxLoader

boxLoader är ett enkelt plugin för att ladda element på sidan rullning. Parametern du ska ställa är riktningarna (x eller y), position på procent, effekt och varaktighet.

beroenden: jQuery | Storlek: 3,42 kb | Licens: N / A

Tilted Page Scroll

När en användare rullar igenom en sida, kommer det här pluginet att avslöja en fantastisk 3D-lutad effekt till det element du ställt in.

beroenden: jQuery | Storlek: 1,5kb | Licens: GNU GPL

AhRelax

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

beroenden: jQuery | Storlek: 1,6kb | Licens: MIT

Fancy Scroll

Om du någonsin ser överflytningseffekten på Android eller iOS, kan du nu använda det här pluginet på din webbplats. Du kan lägga till en animering, antingen en studsa eller glöd, när en användare når upp / ner på sidan.

beroenden: jQuery | Storlek: 2,64kb | Licens: GNU GPL

Parallax bildrulle

Denna plugin gör elementen flytande och rör sig när en användare rullar ner eller uppåt på sidan.

beroenden: jQuery | Storlek: 8,69kb | Licens: MIT

Rlsmooth

Det här är ett litet plugin för att skapa flödeseffekten när en användare krypter ner eller uppåt på sidan. Det finns tre effekter tillgängliga: glida, blekna och visa.

beroenden: jQuery | Storlek: 1,95kb | Licens: MIT

ScrollMe

Lägger till enkla effekter för att bläddra i sidor, t.ex. skala, rotera, översätta och ändra elementets opacitet. Det är lätt att installera: Importera bara jQuery, det här pluginet och ställ in animeringsparametrarna på elementets markup.

beroenden: jQuery | Storlek: 5,45kb | Licens: N / A

Parallax ImageScroll

Med denna plugin kan du ge en parallell 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,01kb | Licens: MIT