Parallax.js: aggiungi un tocco di vivacità al tuo sito web

In questo video-tutorial ti spiego come realizzare un sito web più dinamico per attrarre maggiormente tuoi utenti. Con l’effetto parallasse crei maggior interesse per il tuo sito web perchè al movimento del mouse si muovono gli oggetti presenti sulla homepage. Quanto è noioso un sito web statico? Sono sufficienti alcuni semplici accorgimenti per vivacizzare e rendere più appetibile il tuo sito web. In questo primo video vi mostrerò come aggiungere movimento ad alcuni elementi della vostra home con l’effetto parallasse utilizzando un semplice plugin.
Il plugin Parallax.js che ho utilizzato nella mia risorsa e che potete scaricare nel link in fondo all’articolo, è stato realizzato da Matthew Wagerfield.

#1 – Scarica i file per il tuo progetto al seguente link e successivamente inserisci lo scrip nel foglio html:

<div id="scene”>
</div>

#2 – Crea i tuoi elementi html ed inseriscili nel codice html. Tieni conto che ogni istanza di Parallax ha bisogno di un elemento contenitore che chiamiamo scena. Puoi indicare il nome che vuoi:


<div id="&quot;scene”"></div>

Tutti gli elementi figli della scena diventeranno oggetti in movimento e dei livelli indipendenti.

#3 – Inserisci l’opzione “data-depth” per definire il movimento e la profondità degli elementi. Questo elemento non deve mancare, altrimenti il plug-in non funziona.


<div id="scene”&gt; &lt;div data-depth=“0.2">Il mio primo livello</div>


<div data-depth="“0.6&quot;">Il mio secondo livello</div>

#4 – Richiama il plugin nel foglio html:

var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);

Per capire come utilizzare le altre opzioni visita la pagina del produttore

Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “Parallax.js: aggiungi un tocco di vivacità al tuo sito web”—

Nome *

Email *

Non ci sono commenti

Pubblica un Commento

WordPress spam blocked by CleanTalk.