JavaScript biblioteke za efekte Cool Scrolling

Dizajn web stranice oživljava dobro izvedenom animacijom. Ako tražite odgovarajuće knjižnice za dodavanje efekata vašem projektu, ovdje sam napravio popis nekih knjižnica koje to čine možete koristiti za davanje efekata na temelju događaja pomicanja.

Kada korisnik pomiče svoju web-stranicu prema dolje, radnja može biti dizajniran za pokretanje raznih animacijskih opcija kao što su efekti izbljeđivanja, zamućenje, 3D, paralaksa i još mnogo toga. Tu je 25 JS knjižnica koje vam mogu pomoći da postignete takav odgovor u dizajnu web-lokacije.

Pomicanje Otkrij

Knjižnica koja olakšava dodavanje animacije za pomicanje i za web i za mobilne uređaje. Možete postaviti prilagođeno ublažavanje, 3D rotacije, trajanje i mnoge mor parametre na element koji želite animirati.

ovisnosti: nitko | Veličina: 2.9kb | Licenca: MIT

Aniview

Dodatak koji radi zajedno s programom Animate.CSS kako bi omogućio animacije samo kada vaš element dođe u okvir za prikaz.

ovisnosti: jQuery | Veličina: 1kb | Licenca: N / A

Fade Into View

Dodatak koji dodaje efekt fade in / out elementima kada ulaze ili izlaze iz unaprijed određenih okvira za prikaz.

ovisnosti: jQuery | Veličina: 3.81kb | Licenca: N / A

WOW

WOW će otkriti Animate.css animacije nakon scroll događaja. Možete postaviti trajanje animacije, kašnjenja, pomake i iteracije izravno iz HTML oznake, a zatim jednostavno pozvati klasu elementa iz JS-a.

ovisnosti: Animate.css | Veličina: 8.23kb | Licenca: MIT

ScrollMagic

Ovaj dodatak će prikazati "Čarobni" efekt kada korisnik pomakne stranicu. Savršen je za animiranje, pričvršćivanje elementa ili prebacivanje CSS klase, sve na temelju položaja za pomicanje. ScrollMagic može raditi zajedno sa GSAP i VelocityJS u stvaranju animacijske scene. Potpuni demo pogledajte ovdje.

ovisnosti: jQuery, GSAP, Velocity.js | Veličina: 16,9 kb | Licenca: MIT

jScrollability

jScrollability omogućuje stvaranje pojedinačnih web stranica sa složenim animacijama temeljenim na pomicanju. Nakon korisnika, element će se animirati na temelju scroll pozicija. Animacije se pokreću na temelju dubine pomicanja, i naravno možete postaviti početak i kraj animacije.

ovisnosti: jQuery | Veličina: 1.86kb | Licenca: MIT

pushIn.js

Jednostavna knjižnica koja dodaje dolly-in ili push-in efekt na bilo koji element koji radi kada se korisnik pomiče kroz stranicu. Lako je implementirati: samo dodajte parametre za početak, zaustavljanje i brzinu Podaci-parametri na svoj HTML element.

ovisnosti: nijedan | Veličina: 4.94kb | Licenca: N / A

Scrollissimo

Ovo je JS knjižnica za dodavanje glatkih animacija koje se kontroliraju pomicanjem. Ona koristi Greensock's tweens i rokove za generiranje glatko animacije.

ovisnosti: GreenShock TweenLite / TweenMax | Veličina: 2.94kb | Licenca: N / A

jQuery Dodatak za pomicanje animacije

Ovo je jQuery dodatak za dodavanje animacije pokrenutog vizualnim prikazom pomoću Greensocka. To olakšava animiranje elemenata s olakšavanjem, transformacijom, mjerilom, rotacijom i 3D animacijama.

ovisnosti: jQuery, GreenShock | Veličina: 14kb | Licenca: GNU GPL

Circlr

Circlr omogućuje stvaranje animacije rotacije za element koji se pokreće pomicanjem, događajima miša ili događajima dodira. Savršen je za izlaganje proizvoda koji se može gledati sa svih 360 stupnjeva, a aktivira ga korisnik.

ovisnosti: nijedan | Veličina: 6.05kb | Licenca: MIT

Scrollimator

Scrollimator će vam pokazati položaj i pomicanje napretka, i vratiti vrijednosti koje možete koristiti za promjenu animacija vezanih uz ponašanje korisnika. Podržava vertikalno i horizontalno pomicanje.

ovisnosti: nijedan | Veličina: 37.7kb | Licenca: N / A

Križno utišavanje

Crossfade je dodatak za dodavanje crossfade efekta slici. Zamućen efekt će se nastaviti dok se korisnik pomiče prema dolje.

ovisnosti: jQuery | Veličina: 3.19kb | Licenca: MIT

Učinak pomicanja stranice

Ovo je knjižnica za eksperimentalne efekte pomicanja stranica koje je stvorio CodyHouse. Koristi velocitey.js animacije.

ovisnosti: jQuery, Velocity.js | Veličina: 17.6kb | Licenca: N / A

jquery.parallax-scroll

Ova knjižnica omogućuje dodavanje glatkog paralakse efekta na okomito pomicanje stranice. Samo uvezite jQuery i jquery.easing.1.3.js, a zatim dodajte „Podataka paralakse” atribut i neobavezni patametri za vaš element da biste prilagodili učinak.

ovisnosti: jQuery, jQuery.easing | Veličina: 8,72kb | Licenca: GNU GPL

parallax.js

Parallax.js je jednostavan dodatak koji dodaje efekt pomicanja paralakse, inspiriran web-mjestom Spotify.

ovisnosti: jQuery | Veličina: 6.63kb | Licenca: MIT

Enllax

EnLax je super lagana knjižnica za primjenu na paralakse učinak na bilo koji element pomicanja. Možete postaviti pozadinu ili elemente u prvom planu kako biste postigli etički učinak. Djeluje i za okomito i horizontalno pomicanje.

ovisnosti: jQuery | Veličina: 1.53kb | Licenca: MIT

Zamućivanje na svitku

Ova biblioteka pomaže vam da dodate efekt zamućenja na sliku koja će se pokrenuti pomicanjem stranice. Što se dublje pomičete prema dolje na stranici, slika postaje mutnija.

ovisnosti: nijedan | Veličina: 1.1kb | Licenca: N / A

boxLoader

boxLoader je jednostavan dodatak za učitavanje elemenata prilikom pomicanja stranice. Parametar koji trebate postaviti su smjerovi (x ili y), položaj na postotku, učinak i trajanje.

ovisnosti: jQuery | Veličina: 3.42kb | Licenca: N / A

Nagibna stranica Pomicanje

Kako se korisnik pomiče kroz stranicu, ovaj dodatak će otkriti strašan 3D naginjanje efekta na element koji postavite.

ovisnosti: jQuery | Veličina: 1.5kb | Licenca: GNU GPL

AhRelax

AhRelax pruža način da se brzo pomicanje-based animacije. To je lagan i također ima odlične performanse. Više o tome možete pročitati ovdje.

ovisnosti: jQuery | Veličina: 1.6kb | Licenca: MIT

Fancy Scroll

Ako ikad vidite učinak svitka za prelijevanje na Androidu ili iOS-u, pomoću ovog dodatka sada ga možete primijeniti na svoju web-lokaciju. Možete dodati animaciju, ili odbijenu ili sjajnu, kada korisnik dosegne vrh / dno stranice.

ovisnosti: jQuery | Veličina: 2.64kb | Licenca: GNU GPL

Pomicanje slike paralakse

Ovaj dodatak će elemente plutati i pomicati se dok se korisnik pomiče prema dolje ili prema gore.

ovisnosti: jQuery | Veličina: 8,69kb | Licenca: MIT

Rlsmooth

Ovo je mali dodatak koji stvara efekt tekućeg tijeka kada korisnik pomiče prema dolje ili prema gore. Dostupna su tri efekta: slajd, blijedi i prikaz.

ovisnosti: jQuery | Veličina: 1.95kb | Licenca: MIT

Scrollme

Dodaje jednostavne efekte za pomicanje stranice, kao što je mjerenje, rotiranje, prevođenje i mijenjanje neprozirnosti elemenata. Lako je postaviti: samo uvezite jQuery, ovaj dodatak i postavite parametre animacije na oznaku elementa.

ovisnosti: jQuery | Veličina: 5.45kb | Licenca: N / A

Paralaksa ImageScroll

Ovaj dodatak omogućuje paralaksno djelovanje bilo kojoj slici na vašoj stranici. Koristi CSS3 Transform kako bi učinio efekt. Ovaj dodatak ima podršku za jQuery i AMD.

ovisnosti: jQuery | Veličina: 8,01kb | Licenca: MIT