Librerie JavaScript per effetti di scorrimento Cool

Un sito web design prende vita con un’animazione ben eseguito. Se stai cercando le librerie appropriate per aggiungere effetti al tuo progetto, qui ho fatto un elenco di alcune delle librerie che puoi usare per dare effetti in base all’evento di scorrimento.

Quando un utente scorre la tua pagina Web, l’azione può essere progettata per attivare una varietà di opzioni di animazione come effetti di dissolvenza, sfocatura, 3D, parallasse e altro ancora. Ci sono 25 librerie JS qui che possono aiutarti a ottenere quel tipo di risposta nella progettazione del tuo sito.

Per saperne di più: 15 esempi di scorrimento fatto a destra nella progettazione di siti web

Scroll Reveal

Una libreria che rende facile aggiungere animazione di scorrimento sia per web e mobile. È possibile impostare allentamento personalizzato, rotazioni 3D, durata e molti parametri mor per l’elemento che si desidera animare.

Dipendenze: none | Size: 2.9 kb | Licenza: MIT

Aniview

Un plugin che funziona insieme ad Animate.CSS per abilitare le animazioni solo quando il tuo elemento entra in viewport.

Dipendenze: jQuery / Dimensione: 1kb / Licenza: N / A

Fade Into View

Un plugin che aggiunge l’effetto fade in/out agli elementi quando entrano o escono da finestre predeterminate.

Dipendenze: jQuery | Dimensione: 3.81 kb | Licenza: N/A

WOW

WOW rivelerà Animate.animazioni css su evento di scorrimento. È possibile impostare la durata dell’animazione, i ritardi, gli offset e le iterazioni direttamente dal markup HTML, quindi chiamare la classe dell’elemento da JS.

Dipendenze: Animate.css / Dimensione: 8.23 kb / Licenza: MIT

ScrollMagic

Questo plugin mostrerà un effetto ‘magico’ quando un utente scorre la pagina. È perfetto per animare, bloccare un elemento o attivare la classe CSS, il tutto in base alla posizione di scorrimento. ScrollMagic può collaborare con GSAP e VelocityJS nella creazione di una scena di animazione. Vedere le demo complete qui.

Dipendenze: jQuery, GSAP, Velocity.js | Size: 16.9 kb / Licence: MIT

jScrollability

jScrollability consente di creare singole pagine web con complesse animazioni basate su scorrimento. Al momento dello srotolamento dell’utente, l’elemento verrà animato in base alle posizioni di scorrimento. Le animazioni vengono eseguite in base alla profondità di scorrimento e, naturalmente, è possibile impostare l’inizio e la fine dell’animazione.

Dipendenze: jQuery | Dimensione: 1.86 kb | Licenza: MIT

pushIn.js

Una semplice libreria per aggiungere l’effetto dolly-in o push-in a qualsiasi elemento che funziona quando un utente scorre la pagina. È facile da implementare: basta aggiungere i parametri start, stop e speed a data-params al tuo elemento HTML.

Dipendenze: nessuna / Dimensione: 4.94 kb / Licenza: N / A

Scrollissimo

Questa è una libreria JS per aggiungere animazioni lisce a scorrimento controllato. Utilizza interpolazioni del Greensock e timeline per generare animazioni più fluide.

Dipendenze: GreenShock TweenLite/TweenMax | Size: 2.94kb / Licenza: N / D

jQuery Animation Scroll Plugin

Questo è un plugin jQuery per aggiungere animazione viewport attivato utilizzando Greensock. Lo rende facile per animare gli elementi con facilitazione, trasformare, scala, rotazione e animazioni 3D.

Dipendenze: jQuery, GreenShock | Dimensioni: 14kb | Licenza: GNU GPL

Circlr

Circlr consente di creare l’animazione di rotazione di un elemento, innescato da scorrimento, gli eventi del mouse o touch eventi. E ‘ perfetto per fare una vetrina di un prodotto che può essere visualizzato da tutti i 360 gradi, attivato dall’utente di scorrimento.

Dipendenze: nessuna | Dimensioni: 6.05 kb | Licenza: MIT

Scrollimator

Scrollimator vi mostrerà la posizione di scorrimento e di progresso, e di restituire i valori che è possibile utilizzare per modificare animazioni tween allegata all’utente la modalità di scorrimento. Supporta lo scorrimento verticale e orizzontale.

Dipendenze: nessuna / Dimensione: 37.7 kb / Licenza: N / D

Crossfade

Crossfade è un plugin per aggiungere l’effetto crossfade a un’immagine. L’effetto sfocato continuerà come un utente scorre più in basso.

Dipendenze: jQuery / Dimensione: 3.19 kb / Licenza: MIT

Page Scroll Effect

Questa è una libreria per gli effetti sperimentali di scorrimento della pagina creati da CodyHouse. Utilizza velocitey.animazioni js.

Dipendenze: jQuery, Velocity.js / Dimensione: 17.6 kb / Licenza: N / A

jquery.parallax-scroll

Questa libreria consente di aggiungere un effetto parallasse uniforme allo scorrimento verticale della pagina. Basta importare jQuery e jquery.allentamento.1.3.js, quindi aggiungi l’attributo 'data-parallax' e i patametri opzionali al tuo elemento per personalizzare l’effetto.

Dipendenze: jQuery, jQuery.easing / Dimensione: 8.72 kb / Licenza: GNU GPL

parallasse.js

Parallasse.js è un semplice plugin che aggiunge l’effetto di scorrimento parallasse, ispirato al sito web di Spotify.

Dipendenze: jQuery / Dimensione: 6.63 kb / Licenza: MIT

Enllax

Enllax è una libreria super leggera da utilizzare per applicare l’effetto parallasse a qualsiasi elemento di scorrimento. È possibile impostare gli elementi di sfondo o di primo piano per hav ethis effetto. Funziona sia per lo scorrimento verticale che orizzontale.

Dependencies: jQuery | Size: 1.53 kb | Licence: MIT

Blur on scroll

Questa libreria consente di aggiungere l’effetto di sfocatura a un’immagine, che verrà attivato dallo scorrimento della pagina. Più a fondo scorri la pagina, più sfocata diventa l’immagine.

Dipendenze: nessuna / Dimensione: 1.1 kb / Licenza: N / A

boxLoader

boxLoader è un semplice plugin per caricare elementi sullo scorrimento della pagina. Il parametro da impostare sono le direzioni (x o y), la posizione sulla percentuale, l’effetto e anche la durata.

Dipendenze: jQuery / Dimensione: 3.42 kb / Licenza: N / D

Scorrimento pagina inclinato

Mentre un utente scorre una pagina, questo plugin rivelerà un fantastico effetto inclinato 3D all’elemento impostato.

Dipendenze: jQuery / Dimensione: 1.5 kb | Licenza: GNU GPL

AhRelax

AhRelax fornisce un modo per creare animazioni rapide basate su scorrimento. È leggero e ha anche grandi prestazioni. Si può leggere di più su di esso qui.

Dipendenze: jQuery / Dimensione: 1.6 kb | Licenza: MIT

Fancy Scroll

Se vedi mai l’effetto di scorrimento overflow su Android o iOS, con questo plugin puoi ora applicarlo al tuo sito. È possibile aggiungere un’animazione, un rimbalzo o bagliore, quando un utente raggiunge la parte superiore/inferiore della pagina.

Dependencies: jQuery | Size: 2.64 kb | Licence: GNU GPL

Parallax image scroll

Questo plugin farà fluttuare e spostare gli elementi mentre un utente scorre verso il basso o verso l’alto della pagina.

Dipendenze: jQuery / Dimensione: 8.69 kb / Licenza: MIT

Rlsmooth

Questo è un piccolo plugin per creare l’effetto che scorre quando un utente scolls giù o su per la pagina. Ci sono tre effetti disponibili: slide, fade e show.

Dipendenze: jQuery / Dimensione: 1.95 kb / Licenza: MIT

Scrollme

Aggiunge semplici effetti per lo scorrimento della pagina, come la scala, ruotare, tradurre e cambiare l’opacità degli elementi. È facile da configurare: basta importare jQuery, questo plugin e impostare i parametri di animazione sul markup dell’elemento.

Dipendenze: jQuery / Dimensione: 5.45 kb / Licenza: N / A

Parallax ImageScroll

Questo plugin ti permette di dare un effetto parallasse a qualsiasi immagine sulla tua pagina. Fa uso di CSS3 Transform per far funzionare l’effetto. Questo plugin ha il supporto per jQuery e AMD.

Dipendenze: jQuery / Dimensione: 8.01 kb / Licenza: MIT