JavaScript-biblioteker til Cool Scrolling Effects
Et website design kommer til liv med vel udført animation. Hvis du leder efter de rigtige biblioteker til at tilføje effekter til dit projekt, har jeg lavet en liste over nogle af de biblioteker, der Du kan bruge til at give effekter baseret på rullehændelsen.
Når en bruger ruller ned på din webside, handlingen kan være designet til at udløse en række animations muligheder som fade effekter, sløring, 3D, parallax og meget mere. Der er 25 JS biblioteker her, der kan hjælpe dig med at opnå det slags svar i dit webdesign.
Scroll Reveal
Et bibliotek, der gør det nemt at tilføje scroll animation til både web og mobil. Du kan indstille brugerdefineret lempelse, 3D-rotationer, varighed og mange morparametre til det element, du vil animere.
Afhængigheder: ingen | Størrelse: 2,9kb | Licens: MIT
Aniview
Et plugin, der samarbejder med Animate.CSS for at aktivere animationerne kun, når dit element kommer i visningsport.
Afhængigheder: jQuery | Størrelse: 1kb | Licens: N / A
Fade Into View
Et plugin, der tilføjer fade ind / ud effekt til elementer, når de indtaster eller afslutter forudbestemte viewports.
Afhængigheder: jQuery | Størrelse: 3.81kb | Licens: N / A
WOW
WOW vil afsløre Animate.css animationer på scroll event. Du kan opsætte animationens varighed, forsinkelser, forskydninger og iterationer lige fra HTML-markeringen, så ring bare elementets klasse fra JS.
Afhængigheder: Animate.css | Størrelse: 8.23kb | Licens: MIT
ScrollMagic
Dette plugin viser en 'magisk' effekt, når en bruger ruller siden. Det er perfekt til at animere, fastgøre et element eller skifte CSS klasse, alt baseret på scroll position. ScrollMagic kan arbejde sammen med GSAP og VelocityJS for at skabe en animationsscene. Se de komplette demoer her.
Afhængigheder: jQuery, GSAP, Velocity.js | Størrelse: 16,9kb | Licens: MIT
jScrollability
jScrollability giver dig mulighed for at oprette enkeltwebsider med komplekse rullebaserede animationer. Ved brugerrollen vil elementet animere baseret på rullepositionerne. Animationer kører baseret på scrolldybden, og selvfølgelig kan du indstille start og slutning af animationen.
Afhængigheder: jQuery | Størrelse: 1,86 kb | Licens: MIT
pushIn.js
Et simpelt bibliotek for at tilføje dolly-in eller push-in-effekten til ethvert element, der virker, når en bruger rulle gennem siden. Det er nemt at implementere: Bare tilføj parametrene start, stop og hastighed til data-params til dit HTML-element.
Afhængigheder: ingen | Størrelse: 4.94kb | Licens: N / A
Scrollissimo
Dette er et JS-bibliotek, der tilføjer bløde scrollstyrede animationer. Det udnytter Greensocks tweens og tidslinjer til at generere glattere animationer.
Afhængigheder: GreenShock TweenLite / TweenMax | Størrelse: 2,94kb | Licens: N / A
jQuery Animation Scroll Plugin
Dette er et jQuery-plugin for at tilføje viewport-udløst animation ved hjælp af Greensock. Det gør det nemt at animere elementer med lempelse, transformation, skala, rotation og 3D animationer.
Afhængigheder: jQuery, GreenShock | Størrelse: 14kb | Licens: GNU GPL
Circlr
Circlr giver dig mulighed for at oprette rotationsanimationen til et element, udløst ved at rulle, musehændelser eller berøre hændelser. Det er perfekt til at fremstille et produkt, der kan ses fra alle 360 grader, aktiveret af brugerrulle.
Afhængigheder: ingen | Størrelse: 6.05kb | Licens: MIT
Scrollimator
Scrollimator vil vise dig positionen og rulle fremskridt og returnere værdier, som du kan bruge til at skifte mellem animationer, der er knyttet til brugerens rulleopførsel. Det understøtter lodret og vandret rulning.
Afhængigheder: ingen | Størrelse: 37,7kb | Licens: N / A
Crossfade
Crossfade er et plugin for at tilføje crossfade-effekten til et billede. Den uskarpe effekt fortsætter, når en bruger ruller længere nede.
Afhængigheder: jQuery | Størrelse: 3,19kb | Licens: MIT
Page Scroll Effect
Denne er et bibliotek til eksperimentelle side scroll effekter skabt af CodyHouse. Det udnytter velocitey.js animationer.
Afhængigheder: jQuery, Velocity.js | Størrelse: 17,6kb | Licens: N / A
jquery.parallax-scroll
Dette bibliotek giver dig mulighed for at tilføje glat en parallax effekt til lodret sideskiftning. Bare importer jQuery og jquery.easing.1.3.js, og tilføj derefter 'Data-parallakse' attribut og valgfri patametre til dit element for at tilpasse effekten.
Afhængigheder: jQuery, jQuery.easing | Størrelse: 8,72kb | Licens: GNU GPL
parallax.js
Parallax.js er et simpelt plugin, der tilføjer parallax scrolling effekten, inspireret af Spotify hjemmeside.
Afhængigheder: jQuery | Størrelse: 6,63 kb | Licens: MIT
Enllax
Enllax er et super letvægtsbibliotek til brug ved påføring af parallax-effekten på et rullende element. Du kan indstille baggrunds- eller forgrundselementer for at få etisk virkning. Det fungerer både til lodret og vandret rulning.
Afhængigheder: jQuery | Størrelse: 1,53 kb | Licens: MIT
Slør på rulle
Dette bibliotek hjælper dig med at tilføje blur effekten til et billede, som udløses af siderulle. Jo dybere du ruller ned på siden, jo mere sløret bliver billedet.
Afhængigheder: ingen | Størrelse: 1,1kb | Licens: N / A
boxLoader
boxLoader er et simpelt plugin til at indlæse elementer ved siderulning. Parameteren du skal indstille er retningerne (x eller y), position på procent, effekt og varighed.
Afhængigheder: jQuery | Størrelse: 3,42 kb | Licens: N / A
Tilted Page Scroll
Når en bruger ruller gennem en side, vil dette plugin afsløre en fantastisk 3D-kantet effekt til det element, du har oprettet.
Afhængigheder: jQuery | Størrelse: 1,5kb | Licens: GNU GPL
AhRelax
AhRelax giver mulighed for hurtige rullebaserede animationer. Det er lighvægt og har også stor ydeevne. Du kan læse mere om det her.
Afhængigheder: jQuery | Størrelse: 1,6kb | Licens: MIT
Fancy Scroll
Hvis du nogensinde ser overflowrulleffekten på Android eller iOS, kan du med dette plugin nu anvende dette på dit websted. Du kan tilføje en animation, enten en hoppe eller glød, når en bruger når øverst / nederst på siden.
Afhængigheder: jQuery | Størrelse: 2,64 kb | Licens: GNU GPL
Parallax image scroll
Dette plugin vil gøre elementer flyde og flytte som en bruger ruller ned eller op på siden.
Afhængigheder: jQuery | Størrelse: 8,69kb | Licens: MIT
Rlsmooth
Dette er et lille plugin til at skabe den flydende effekt, når en bruger scolls ned eller op på siden. Der er tre effekter til rådighed: slide, fade og show.
Afhængigheder: jQuery | Størrelse: 1,95 kb | Licens: MIT
Scrollme
Tilføjer enkle effekter til siderulning, f.eks. Skala, rotere, oversætte og ændre elementernes opacitet. Det er nemt at opsætte: Bare importer jQuery, dette plugin og indstil animationsparametrene på elementets markering.
Afhængigheder: jQuery | Størrelse: 5,45 kb | Licens: N / A
Parallax ImageScroll
Dette plugin giver dig mulighed for at give en parallax-effekt til ethvert billede på din side. Det gør brug af CSS3 Transform for at få effekten til at fungere. Dette plugin understøtter jQuery og AMD.
Afhængigheder: jQuery | Størrelse: 8,01kb | Licens: MIT
