Rellax.js - Funzionalità Parallax gratuite che usano JavaScript Vanilla

Scorrimento parallasse sembra incredibile se fatto bene. Non è una funzionalità che desideri su tutti i siti Web, ma per siti creativi e pagine di destinazione, elementi di parallasse attira l'attenzione velocemente.

Ci sono tonnellate di librerie JavaScript libere per effetti di scorrimento animati ma molti sono gonfiati o troppo complessi per alcune persone.

Ecco perché lo raccomando Rellax.js per i tuoi bisogni di parallasse. È un plugin open source gratuito costruito su JavaScript vanilla, quindi non ha alcuna dipendenza.

Di default, richiede solo una semplice chiamata di funzione per assegnare la classe di parallasse agli elementi della pagina. Quindi, mentre scorri, questi elementi stai fisso e andare avanti con il punto di vista dell'utente.

È possibile personalizzare questi elementi per apparire più vicini, più distanti o dietro gli elementi della pagina. Questo crea il illusione di profondità sulla pagina e tutto funziona attraverso una semplice libreria JavaScript.

Tutto il codice sorgente Rellax è disponibile gratuitamente su GitHub se vuoi scaricare una copia.

L'intera configurazione usa una singola funzione JS targeting per il .rellax classe in questo modo:

 var rellax = new Rellax ('. rellax'); 

Nota che puoi usare praticamente qualsiasi classe tu voglia, ma la demo di esempio usa .rellax per semplicità.

Da qui, tu solo avvolgi i tuoi elementi parallasse dentro un div con il .rellax classe e imposta l'attributo della velocità. Questo funziona attraverso il Dati-rellax velocità attributo personalizzato che accetta valori da -10 a +10.

Ecco un esempio di snippet dall'HTML sulla pagina demo:

 
 Sono più lento e lento 
 

Puoi anche elementi centrali sulla pagina e personalizzare le posizioni degli elementi tramite CSS.

Rellax non ti spiega come strutturare la pagina o come definire elementi CSS nella tua pagina. Tutto ciò che fa è crea un effetto di scorrimento della parallasse naturale con puro JavaScript. Il modo in cui lo usi dipende totalmente da te.

Per vedere a dimostrazione dal vivo, dare un'occhiata al sito principale o sfogliare il repository GitHub. Questo include alcuni documenti, insieme ai link ai siti web live usando Rellax.js.

E soprattutto, il team è costantemente disposto a prendere richieste di pull, quindi se si notano problemi o suggerimenti per le funzionalità basta inviare un messaggio rapido al team.