JavaScript-Biblioteker For Kule Rulle Effekter

et nettsted design kommer til liv med godt utført animasjon. Hvis du leter etter de riktige bibliotekene for å legge til effekter i prosjektet, har jeg laget en liste over noen av bibliotekene du kan bruke til å gi effekter basert på rullehendelsen.

når en bruker ruller ned nettsiden din, kan handlingen utformes for å utløse en rekke animasjonsalternativer som fade effekter, uskarphet, 3D, parallax og mer. Det er 25 js biblioteker her som kan hjelpe deg å oppnå den slags svar i ditt nettsted design.

Les mer: 15 eksempler på rulling gjort rett i webdesign

Rullevisning

et bibliotek som gjør det enkelt å legge til rulleanimasjon for både web og mobil. Du kan angi tilpassede lettelser, 3d rotasjoner, varighet og mange mor parametere til elementet du ønsker å animere.

Avhengigheter: ingen / Størrelse: 2.9 kb / Lisens: MIT

Aniview

en plugin som fungerer sammen Med Animate.CSS for å aktivere animasjonene bare når elementet kommer inn viewport.

Avhengigheter: jQuery / Størrelse: 1kb / Lisens: N / A

Fade Into View

en plugin som legger fade inn / ut effekt til elementer når de går inn eller ut forhåndsbestemt viewports.

Avhengigheter: jQuery | Størrelse: 3.81 kb/Lisens: N / A

WOW

WOW vil avsløre Animere.css animasjoner på bla hendelse. Du kan sette opp animasjonsvarighet, forsinkelser, forskyvninger og iterasjoner rett fra HTML-oppslaget, så ring bare elementets klasse FRA JS.

Avhengigheter: Animere.css / Størrelse: 8.23 kb / Lisens: MIT

ScrollMagic

denne plugin vil vise En ‘Magisk’ effekt når en bruker ruller siden. Det er perfekt for animere, låsing et element, eller veksling CSS klasse, alt basert på bla posisjon. ScrollMagic kan arbeide sammen MED GSAP Og VelocityJS i å skape en animasjon scene. Se de komplette demoene her.

Avhengigheter: jQuery, Gsap, Hastighet.js | Size: 16.9 kb / Lisens: mit

jScrollability

Jscrollability lar deg lage enkle websider med komplekse rullebaserte animasjoner. Ved brukersroll vil elementet animere basert på rulleposisjonene. Animasjoner kjøres basert på rulledybden, og selvfølgelig kan du angi start og slutt på animasjonen.

Avhengigheter: jQuery | Størrelse: 1.86 kb / Lisens: MIT

pushIn.js

et enkelt bibliotek for å legge til dolly-in eller push-in effekt til et element som fungerer når en bruker ruller gjennom siden. Det er enkelt å implementere: bare legg start -, stopp-og hastighetsparametrene til data-params TIL HTML-elementet.

Avhengigheter: ingen / Størrelse: 4.94 kb / Lisens: N / A

Scrollissimo

Dette er ET js-bibliotek for å legge til glatte rullestyrte animasjoner. Det benytter Greensock tweens og tidslinjer for å generere jevnere animasjoner.

Avhengigheter: GreenShock TweenLite / TweenMax / Storrelse: 2.94kb / Lisens: N / A

jQuery Animasjon Scroll Plugin

Dette er en jQuery plugin for å legge view-utløst animasjon ved Hjelp Av Greensock. Det gjør det enkelt å animere elementer med lettelser, transform, skala, rotasjon OG 3D-animasjoner.

Avhengigheter: jQuery | GreenShock / Størrelse: 14KB / Lisens: GNU GPL

Circlr

Circlr lar deg lage rotasjon animasjon til et element, utløst av rulling, mus hendelser eller touch hendelser. Det er perfekt å lage et showcase av et produkt som kan ses fra alle 360 grader, aktivert av brukerrulle.

Avhengigheter: ingen / Størrelse: 6.05 kb / Lisens: MIT

Scrollimator

Scrollimator vil vise deg posisjonen og bla fremgang, og returnere verdier som du kan bruke til å endre tween animasjoner knyttet til bruker rulling atferd. Den støtter vertikal og horisontal rulling.

Avhengigheter: ingen / Størrelse: 37.7 kb / Lisens: N / A

Crossfade

Crossfade Er en plugin for å legge crossfade effekt på et bilde. Den uskarpe effekten vil fortsette som en bruker ruller lenger ned.

Avhengigheter: jQuery / Størrelse: 3.19 kb / Lisens: MIT

Page Scroll Effect

Dette er et bibliotek for eksperimentelle side scroll effekter opprettet Av CodyHouse. Det benytter velocitey.js animasjoner.

Avhengigheter: jQuery, Hastighet.js / Størrelse: 17.6 kb / Lisens: n / A

jquery.parallax-scroll

dette biblioteket lar deg legge til jevn parallax-effekt til vertikal siderulling. Bare importer jQuery og jquery.lettelser.1.3.js, legg deretter til attributtet 'data-parallax' og valgfrie patametere til elementet for å tilpasse effekten.

Avhengigheter: jQuery, jQuery.lettelser / Størrelse: 8.72 kb | Lisens: GNU GPL

parallax.Js

Parallax.js er en enkel plugin som legger parallax rulling effekt, inspirert Av Spotify nettsiden.

Avhengigheter: jQuery / Størrelse: 6.63 kb / Lisens: MIT

Enllax

Enllax Er en super lett bibliotek for bruk på å bruke parallax effekt til noen rulle element. Du kan angi bakgrunn eller forgrunnselementer til hav ethis effekt. Det fungerer for både vertikal og horisontal rulling.

Avhengigheter: jQuery | Størrelse: 1.53 kb / Lisens: MIT

Uskarphet på rulle

dette biblioteket hjelper deg med å legge til uskarphet i et bilde, som vil bli utløst ved siderulling. Jo dypere du ruller nedover siden, jo mer uklart blir bildet.

Avhengigheter: ingen / Størrelse: 1.1 kb / Lisens: N / A

boxLoader

boxLoader er en enkel plugin for å laste elementer ved side rulling. Parameteren du bør angi er retningene (x eller y), posisjon på prosent, effekt og også varighet.

Avhengigheter: jQuery / Størrelse: 3.42 kb / Lisens: N / A

Tilted Page Scroll

som en bruker ruller gjennom en side, vil denne plugin avsløre en fantastisk 3d tilted effekt til elementet du setter opp.

Avhengigheter: jQuery / Størrelse: 1.5 kb | Lisens: GNU GPL

AhRelax

AhRelax gir en måte å lage raske rullebaserte animasjoner på. Det er lett og har også god ytelse. Du kan lese mer om det her.

Avhengigheter: jQuery / Størrelse: 1.6 kb / Lisens: MIT

Fancy Scroll

hvis du noen gang ser overflow scroll effect På Android eller iOS, med dette pluginet kan du nå bruke dette på nettstedet ditt. Du kan legge til en animasjon, enten en sprett eller glød, når en bruker når toppen / bunnen av siden.

Avhengigheter: jQuery | Størrelse: 2.64 kb / Lisens: GNU GPL

Parallax image scroll

denne plugin vil gjøre elementer flyte og flytte som en bruker ruller ned eller opp på siden.

Avhengigheter: jQuery / Størrelse: 8.69 kb / Lisens: MIT

Rlsmooth

Dette er en liten plugin for å skape flytende effekt når en bruker scolls ned eller opp på siden. Det er tre effekter tilgjengelig: slide, fade og show.

Avhengigheter: jQuery / Størrelse: 1.95 kb / Lisens: MIT

Scrollme

Legger enkle effekter til side rulling som skala, rotere, oversette og endre tettheten av elementer. Det er enkelt å sette opp: bare importere jQuery, denne plugin, og sette animasjonsparametere på elementets markup.

Avhengigheter: jQuery / Størrelse: 5.45 kb / Lisens: N / A

Parallax ImageScroll

denne plugin lar deg gi en parallax effekt til et bilde på siden din. Det gjør BRUK AV CSS3 Transform å gjøre effekten arbeid. Denne plugin har støtte for JQUERY OG AMD.

Avhengigheter: jQuery / Størrelse: 8.01 kb / Lisens: MIT