Librerie JavaScript per Cool Scrolling Effects
Il design di un sito web prende vita con un'animazione ben eseguita. Se stai cercando le librerie appropriate per aggiungere effetti al tuo progetto, qui ho creato un elenco di alcune delle librerie puoi usare per dare effetti basati sull'evento di scorrimento.
Quando un utente scorre verso il basso la tua pagina web, l'azione può essere progettato 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.
Scorri Rivela
Una libreria che semplifica l'aggiunta di animazioni di scorrimento per Web e dispositivi mobili. È possibile impostare l'attenuazione personalizzata, le rotazioni 3D, la durata e molti parametri mor sull'elemento che si desidera animare.
dipendenze: nessuno | Taglia: 2.9kb | Licenza: MIT
Aniview
Un plugin che interagisce con Animate.CSS per abilitare le animazioni solo quando il tuo elemento entra nella finestra.
dipendenze: jQuery | Taglia: 1kb | Licenza: N / A
Dissolvenza in visualizzazione
Un plugin che aggiunge l'effetto di dissolvenza in entrata / uscita agli elementi quando entrano o escono dalle finestre predeterminate.
dipendenze: jQuery | Taglia: 3,81 kb | Licenza: N / A
WOW
WOW rivelerà le animazioni di Animate.css sull'evento di scorrimento. Puoi impostare la durata dell'animazione, i ritardi, gli offset e le iterazioni direttamente dal markup HTML, quindi chiama semplicemente la classe dell'elemento da JS.
dipendenze: Animate.css | Taglia: 8.23kb | 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, tutto basato sulla posizione di scorrimento. ScrollMagic può interagire con GSAP e VelocityJS nella creazione di una scena di animazione. Guarda qui le demo complete.
dipendenze: jQuery, GSAP, Velocity.js | Taglia: 16,9kb | Licenza: MIT
jScrollability
jScrollability ti consente di creare singole pagine Web con complesse animazioni basate su scorrimento. Su user sroll, l'elemento si animerà 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 | Taglia: 1,86 kb | Licenza: MIT
pushIn.js
Una semplice libreria per aggiungere l'effetto dolly-in o push-in a qualsiasi elemento che funzioni quando un utente scorre la pagina. È facile da implementare: basta aggiungere i parametri start, stop e speed a Dati-params al tuo elemento HTML.
dipendenze: nessuna | Taglia: 4,94 kb | Licenza: N / A
Scrollissimo
Questa è una libreria JS per aggiungere animazioni scorrevoli controllate da scorrimento. Utilizza le interpolazioni e le sequenze temporali di Greensock per generare animazioni più fluide.
dipendenze: GreenShock TweenLite / TweenMax | Taglia: 2.94kb | Licenza: N / A
jQuery Animation Scroll Plugin
Questo è un plugin jQuery per aggiungere un'animazione innescata da una vista utilizzando Greensock. Semplifica l'animazione di elementi con andamento, trasformazione, ridimensionamento, rotazione e animazioni 3D.
dipendenze: jQuery, GreenShock | Taglia: 14kb | Licenza: GNU GPL
Circlr
Circlr consente di creare l'animazione di rotazione su un elemento, attivata dallo scorrimento, dagli eventi del mouse o dagli eventi tattili. È perfetto per fare una vetrina di un prodotto che può essere visualizzato da tutti i 360 gradi, attivato dall'utente scroll.
dipendenze: nessuna | Taglia: 6,05 kb | Licenza: MIT
Scrollimator
Scrollimator ti mostrerà la posizione e lo scorrimento, e restituirà valori che puoi usare per cambiare le interpolazioni animate associate al comportamento di scorrimento dell'utente. Supporta lo scorrimento verticale e orizzontale.
dipendenze: nessuna | Taglia: 37,7 kb | Licenza: N / A
crossfade
Crossfade è un plugin per aggiungere l'effetto di dissolvenza incrociata a un'immagine. L'effetto sfocato continuerà mentre l'utente scorre più in basso.
dipendenze: jQuery | Taglia: 3,19kb | Licenza: MIT
Page Scroll Effect
Questa è una libreria per effetti di scorrimento di pagine sperimentali creati da CodyHouse. Utilizza velocitey.js animazioni.
dipendenze: jQuery, Velocity.js | Taglia: 17,6kb | Licenza: N / A
jquery.parallax-scroll
Questa libreria ti consente di aggiungere un effetto di parallasse uniforme allo scorrimento verticale delle pagine. Importa solo jQuery e jquery.easing.1.3.js, quindi aggiungi il 'Data-parallasse' attributo e patametri opzionali al tuo elemento per personalizzare l'effetto.
dipendenze: jQuery, jQuery.easing | Taglia: 8.72kb | Licenza: GNU GPL
parallax.js
Parallax.js è un semplice plugin che aggiunge l'effetto di scorrimento della parallasse, ispirato al sito web di Spotify.
dipendenze: jQuery | Taglia: 6,63 kb | Licenza: MIT
Enllax
Enllax è una libreria super leggera da utilizzare per applicare l'effetto di parallasse a qualsiasi elemento di scorrimento. È possibile impostare elementi di sfondo o di primo piano per avere questo effetto. Funziona sia per lo scorrimento verticale che orizzontale.
dipendenze: jQuery | Taglia: 1,53 kb | Licenza: MIT
Sfocatura sullo scorrimento
Questa libreria ti aiuta ad aggiungere l'effetto sfocatura a un'immagine, che verrà attivata dallo scorrimento della pagina. Più scendi più in basso nella pagina, più l'immagine diventa sfocata.
dipendenze: nessuna | Taglia: 1.1kb | Licenza: N / A
Boxloader
boxLoader è un semplice plugin per caricare elementi sullo scorrimento delle pagine. Il parametro che dovresti impostare sono le direzioni (x o y), la posizione su percentuale, l'effetto e anche la durata.
dipendenze: jQuery | Taglia: 3.42kb | Licenza: N / A
Rotolo di pagina inclinato
Quando un utente scorre una pagina, questo plugin rivelerà un fantastico effetto 3D inclinato sull'elemento che hai impostato.
dipendenze: jQuery | Taglia: 1.5kb | Licenza: GNU GPL
AhRelax
AhRelax fornisce un modo per creare animazioni rapide basate su scroll. È lighweight e ha anche grandi prestazioni. Puoi leggere di più qui.
dipendenze: jQuery | Taglia: 1,6kb | Licenza: MIT
Fancy Scroll
Se vedi l'effetto di scorrimento overflow su Android o iOS, con questo plug-in puoi ora applicare questo al tuo sito. Puoi aggiungere un'animazione, un rimbalzo o un bagliore, quando un utente raggiunge la parte superiore / inferiore della pagina.
dipendenze: jQuery | Taglia: 2,64 kb | Licenza: GNU GPL
Scorrimento immagine parallasse
Questo plugin renderà gli elementi mobili e mobili come un utente scorre verso il basso o verso l'alto della pagina.
dipendenze: jQuery | Taglia: 8.69kb | Licenza: MIT
Rlsmooth
Questo è un piccolo plug-in per creare l'effetto scorrevole quando un utente esegue il rollover o la pagina. Ci sono tre effetti disponibili: slide, fade e show.
dipendenze: jQuery | Taglia: 1,95 kb | Licenza: MIT
ScrollMe
Aggiunge effetti semplici allo scorrimento delle pagine, come ad esempio ridimensionare, ruotare, tradurre e modificare l'opacità degli elementi. È facile da configurare: basta importare jQuery, questo plugin e impostare i parametri di animazione sul markup dell'elemento.
dipendenze: jQuery | Taglia: 5.45kb | Licenza: N / A
Parallax ImageScroll
Questo plugin ti consente di dare un effetto di parallasse a qualsiasi immagine sulla tua pagina. Usa la trasformazione CSS3 per far funzionare l'effetto. Questo plugin ha il supporto per jQuery e AMD.
dipendenze: jQuery | Taglia: 8,01 kb | Licenza: MIT
