By admin 13 Novembre 2019 In wordpress

Aggiungere un effetto parallasse agli elementi: rellax.js

Hai mai pensato che l’effetto parallasse che applichi agli sfondi potrebbe essere applicato anche agli elementi, in modo da ottenere un movimento verticale più lento o più veloce rispetto allo sfondo?

Un effetto parallasse applicato ad un elemento consente di avere una notevole sensazione di profondità e tridimensionalità agli occhi di chi sta scrollando il nostro sito web.

L’immagine di seguito si muove più lentamente di tutto il contenuto di questo post ed è grazie all’integrazione di un tool, rellax.js, che riusciamo ad attivare dei movimenti più lenti o più veloci per gli elementi interessati.

Ora vediamo come integrare questo tool nel nostro sito wordpress.

La prima cosa da fare è scaricare il file .js dal seguente link:
https://www.alessandro-mazzola.it/rellax.js

Una volta integrato lo script rellax.js nel footer del tuo sito dobbiamo aggiungere anche il seguente script subito sotto:

<script>
    var rellax = new Rellax('.rellax', {center: true});
</script>

Aggiungiamo la classe “rellax” all’elemento interessato e, per stabilire quanto veloce o lento si deve muovere l’elemento, possiamo utilizzare il seguente attributo, impostando un valore che va da 0 a 1 per movimenti più lenti del normale, oltre l’1 per movimenti più veloci:

data-rellax-percentage="0.5"

Ecco un esempio di elemento che si muove ad una velocità dimezzata, quindi più lenta, rispetto al resto del contenuto:

<div class="rellax" data-rellax-percentage="0.5">Contenuto più lento</div>

Per scoprire di più su questo meraviglioso tool ecco il link degli sviluppatori:

https://dixonandmoe.com/rellax/

Leave a reply