JavaScript-biblioteker for kule rullingseffekter
Et nettsteddesign kommer til liv med velutført animasjon. Hvis du leter etter de riktige bibliotekene for å legge til effekter på prosjektet ditt, har jeg laget en liste over noen av bibliotekene som Du kan bruke til å gi effekter basert på rullehendelsen.
Når en bruker ruller ned din nettside, handlingen kan utformes for å utløse en rekke animasjonsalternativer som fadeeffekter, uskarphet, 3D, parallax og mer. Det er 25 JS biblioteker her som kan hjelpe deg med å oppnå det slags svaret i webdesign.
Scroll Reveal
Et bibliotek som gjør det enkelt å legge til rulleanimasjon for både web og mobil. Du kan angi tilpasset lettelse, 3D-rotasjoner, varighet og mange morparametre til elementet du vil animere.
avhengig~~POS=TRUNC: ingen | Størrelse: 2,9kb | Tillatelse: MIT
Aniview
Et plugin som fungerer sammen med Animate.CSS for å aktivere animasjonene bare når elementet ditt kommer inn i visningsport.
avhengig~~POS=TRUNC: jQuery | Størrelse: 1kb | Tillatelse: N / A
Fade Into View
En plugin som legger til fade inn / ut effekt på elementer når de går inn eller ut av forutbestemte visningsporte.
avhengig~~POS=TRUNC: jQuery | Størrelse: 3.81kb | Tillatelse: N / A
WOW
WOW vil avsløre Animate.css animasjoner ved rullehendelse. Du kan sette opp animasjonens varighet, forsinkelser, kompensasjoner og iterasjoner rett fra HTML-oppslaget, og bare ring elementets klasse fra JS.
avhengig~~POS=TRUNC: Animate.css | Størrelse: 8.23kb | Tillatelse: MIT
ScrollMagic
Dette pluginet vil vise en "Magisk" effekt når en bruker ruller siden. Den er perfekt for å animere, pinne et element, eller bytte CSS klasse, alt basert på rulleposisjon. ScrollMagic kan samarbeide med GSAP og VelocityJS for å skape en animasjonsscene. Se fullstendige demoer her.
avhengig~~POS=TRUNC: jQuery, GSAP, Velocity.js | Størrelse: 16,9kb | Tillatelse: MIT
jScrollability
jScrollability lar deg lage enkle websider med komplekse rullebaserte animasjoner. Ved bruker sroll, vil elementet animere basert på rullestillinger. Animasjoner kjører basert på rullediameteren, og selvfølgelig kan du angi start og slutt på animasjonen.
avhengig~~POS=TRUNC: jQuery | Størrelse: 1,86kb | Tillatelse: MIT
pushIn.js
Et enkelt bibliotek for å legge til dolly-in eller push-in-effekten til ethvert element som fungerer når en bruker rulle gjennom siden. Det er enkelt å implementere: bare legg til start, stopp og hastighetsparameter til data-parametere til HTML-elementet ditt.
avhengig~~POS=TRUNC: ingen | Størrelse: 4.94kb | Tillatelse: N / A
Scrollissimo
Dette er et JS-bibliotek for å legge til glatte rullestyrte animasjoner. Det bruker Greensocks tweens og tidslinjer for å generere mykere animasjoner.
avhengig~~POS=TRUNC: GreenShock TweenLite / TweenMax | Størrelse: 2,94kb | Tillatelse: N / A
jQuery Animasjon Scroll Plugin
Dette er et jQuery-programtillegg for å legge til animasjon med visningsport med Greensock. Det gjør det enkelt å animere elementer med lettelse, transformere, skala, rotasjon og 3D animasjoner.
avhengig~~POS=TRUNC: jQuery, GreenShock | Størrelse: 14kb | Tillatelse: GNU GPL
Circlr
Circlr lar deg lage rotasjonsanimasjonen til et element som utløses av rulling, museventiler eller berøringshendelser. Det er perfekt å lage et showcase av et produkt som kan ses fra alle 360 grader, aktivert av brukerrulle.
avhengig~~POS=TRUNC: ingen | Størrelse: 6.05kb | Tillatelse: MIT
Scrollimator
Scrollimator vil vise deg posisjonen og bla fremdriften, og returnere verdier som du kan bruke til å endre tween animasjoner knyttet til brukerens rulleadferd. Den støtter vertikal og horisontal rulling.
avhengig~~POS=TRUNC: ingen | Størrelse: 37,7kb | Tillatelse: N / A
Crossfade
Crossfade er et plugin for å legge til crossfade-effekten på et bilde. Den uskarpe effekten fortsetter når en bruker ruller lenger ned.
avhengig~~POS=TRUNC: jQuery | Størrelse: 3.19kb | Tillatelse: MIT
Page Scroll Effect
Denne er et bibliotek for eksperimentelle sideskrolleffekter opprettet av CodyHouse. Det bruker velocitey.js animasjoner.
avhengig~~POS=TRUNC: jQuery, Velocity.js | Størrelse: 17,6kb | Tillatelse: N / A
jquery.parallax-bla
Dette biblioteket lar deg legge til jevn en parallell effekt til vertikal sideskrolling. Bare importer jQuery og jquery.easing.1.3.js, legg deretter til 'Data-parallakse' attributt og valgfrie patametre til elementet ditt for å tilpasse effekten.
avhengig~~POS=TRUNC: jQuery, jQuery.easing | Størrelse: 8,72kb | Tillatelse: GNU GPL
parallax.js
Parallax.js er et enkelt plugin som legger til parallell rulling effekten, inspirert av Spotify nettstedet.
avhengig~~POS=TRUNC: jQuery | Størrelse: 6,63 kb | Tillatelse: MIT
Enllax
Enllax er et super lettbibliotek for bruk ved å påføre parallax-effekten på ethvert rullingselement. Du kan angi bakgrunns- eller forgrunnselementer for å ha etisk effekt. Den fungerer både for vertikal og horisontal rulling.
avhengig~~POS=TRUNC: jQuery | Størrelse: 1,53 kb | Tillatelse: MIT
Slør på bla
Dette biblioteket hjelper deg å legge til uskarphetseffekten på et bilde, som vil bli utløst av sideskrolling. Jo dypere du ruller nedover siden, jo mer uklart blir bildet.
avhengig~~POS=TRUNC: ingen | Størrelse: 1.1kb | Tillatelse: N / A
boxLoader
boxLoader er en enkel plugin for å laste elementer på siderulling. Parameteren du bør stille er retningene (x eller y), posisjon på prosent, effekt og varighet.
avhengig~~POS=TRUNC: jQuery | Størrelse: 3,42 kb | Tillatelse: N / A
Tilted Page Scroll
Når en bruker ruller gjennom en side, vil dette pluginet avsløre en fantastisk 3D-kantet effekt til elementet du har satt opp.
avhengig~~POS=TRUNC: jQuery | Størrelse: 1,5kb | Tillatelse: GNU GPL
AhRelax
AhRelax gir deg mulighet til å lage raske animasjonsbaserte animasjoner. Den er lett og har også god ytelse. Du kan lese mer om det her.
avhengig~~POS=TRUNC: jQuery | Størrelse: 1,6kb | Tillatelse: MIT
Fancy Scroll
Hvis du noensinne ser overflytningseffekten på Android eller iOS, kan du nå bruke dette pluginet 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.
avhengig~~POS=TRUNC: jQuery | Størrelse: 2,64 kb | Tillatelse: GNU GPL
Parallax image scroll
Denne plugin vil gjøre elementene flyte og flytte når en bruker ruller ned eller oppover på siden.
avhengig~~POS=TRUNC: jQuery | Størrelse: 8,69kb | Tillatelse: MIT
Rlsmooth
Dette er et lite plugin for å skape den flytende effekten når en bruker scoll ned eller oppover siden. Det er tre effekter tilgjengelig: lysbilde, visne og vise.
avhengig~~POS=TRUNC: jQuery | Størrelse: 1,95 kb | Tillatelse: MIT
Scrollme
Legger til enkle effekter for å bla, for eksempel skala, rotere, oversette og endre elementets opasitet. Det er enkelt å sette opp: bare importer jQuery, dette pluginet, og sett animasjonsparametrene på elementets merking.
avhengig~~POS=TRUNC: jQuery | Størrelse: 5,45kb | Tillatelse: N / A
Parallax ImageScroll
Denne plugin lar deg gi en parallax-effekt til et hvilket som helst bilde på siden din. Det gjør bruk av CSS3 Transform for å få effekten til å fungere. Denne plugin har støtte for jQuery og AMD.
avhengig~~POS=TRUNC: jQuery | Størrelse: 8.01kb | Tillatelse: MIT
