Se ti piacciono gli effetti 3D al cinema, siamo sicuri che ti piacerà anche questo! I siti web che utilizzano questa tecnologia creano un effetto davvero spettacolare e coinvolgente, e te ne renderai conto dando un’occhiata al nostro articolo. L’effetto di parallasse, infatti, è una caratteristica molto diffusa nelle landing page e nel design. Se non ne hai mai sentito parlare, non ti resta che avventurarti in questo fantastico mondo 3D, nel quale la tecnologia si unisce al mondo digitale. Foto, video e in una realtà tridimensionale unica.

Effetto parallasse: cos’è

L’effetto parallasse o parallax è un fenomeno per cui un oggetto sembra spostarsi rispetto allo sfondo se si cambia punto di osservazione. Questo tipo di reazione è spesso visibile nel design di siti web o nei titoli dei film. Basti pensare alla scritta di “The Walking Dead” o al progetto “Nasa“. L’effetto visivo simula uno spostamento dell’oggetto in una realtà bidimensionale, utilizzando degli elementi di grafica specifici. Il risultato è quasi sempre sorprendente. La mente viene distratta dalle immagini in movimento, come se il nostro schermo proiettasse in 3D.

Come funziona?

Dal nome “parallax” potrebbe sembrarti una tecnica complessa ma in realtà non è così. Molte persone, quando devono inserire delle immagini in un video, tendono a zoomare, per poi fare qualche movimento a destra e a sinistra per creare un effetto. Ma oggi considera questa tecnica come un nuovo modo per animare foto e video. Questo effetto ti permetterà di rendere più visibile il tuo profilo ed anche più accattivante per i competitors. Vedrai, sarai invidiato da tutti! Ma in che consiste sostanzialmente?

Spostando la testa da destra a sinistra, e viceversa, vedrai che la posizione relativa all’oggetto che hai di fronte cambia. Il tuo soggetto si avvicina sempre più a te, mentre i paesaggi cambiano colore o mutano in altre forme strane. Oggetti che ti sembrano vicini si allontanano e quelli lontani restano immobili. Mentre sei concentrato a guardare quello che ti è di fronte, c’è qualcos’altro che si sta muovendo più veloce. Tutto questo è l’effetto parallasse!

Come si applica l’effetto parallax sui siti web?

Ci sono tanti modi per applicare l’effetto parallax al tuo sito web. Anche se non lo hai integrato all’interno del tuo tema, puoi utilizzarlo lo stesso. Ti mostreremo come farlo, con o senza plugin. Iniziamo!

Per prima cosa devi aggiungere il PluginIl termine plugin (o estensione o add-on) si usa in ambito informatico. Indica un programma non autonomo che interagisce con un altro per estenderne o potenziarne le funzionalità originarie.  ... per ottenere l’effetto dello scorrimento parallasse. Ti consigliamo di utilizzare  Advanced WordPress Backgrounds (AWB) che è adatto per il sito WordPress. Una volta installato, clicca su “Accedi” e aggiungi il plugin per utilizzare le immagini e i video. Scegli la pagina dove decidi di applicare l’effetto, clicca su “blocco“, inserisci la foto da modificare accedendo alla tua libreria o scattandola al momento e poi abilita l’effetto “scroll“. Inoltre puoi attivare la funzione del mouse, che ti darà maggiore controllo nella riuscita dell’effetto.

Se non vuoi utilizzare un plugin, CSS parallax è un’ottima fonte di ispirazione da utilizzare per animare le foto a velocità diverse. La prima cosa da fare è aggiungere nei media del tuo sito, ad esempio WordPress, una foto. Vai nella dashboard e clicca su “aggiungi nuovo“, inserisci l’immagine e una volta caricata accedi direttamente in libreria. Clicca sulla foto e troverai nelle opzioni il link da copiare. Inoltre devi utilizzare la seguente regola css:

[php]

img{

background-attachments: fixed;

}

[/php]

Questo serve per permettere di creare l’effetto parallasse mentre l’immagine rimane fissa. Infine potrai aggiungere il CSS al tuo tema. Copia il seguente l’URL, aggiungendo la regola che ti abbiamo riportato sopra:

“.parallax {background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;margin-left:-410px;margin-right:-410px”;

Salva le modifiche e vedrai il tuo effetto in azione!

Come utilizzare l’effetto parallasse sul sito web

Come abbiamo già visto, l’effetto parallasse permette di attirare visitatori e ottenere maggiori interazioni sul tuo profilo. Ma come possiamo utilizzarlo nel miglior modo? Eccoti qui alcuni consigli ed esempi:

• Mostra i tuoi contenuti a 360 gradi. Per farlo puoi utilizzare l’effetto panorama in modo tale da avere una visione globale;
• Rendi originale il tuo sito. Per questo ti consigliamo di scaricare Bridge. Quest’app ti aiuta a creare composizioni e immagini per il tuo sito;
• Fai divertire chi è appassionato di moda e ama variare nello stile. Con Krystalrae puoi scrollare scegliendo l’outfit migliore.
• Ciò che è fondamentale è dare importanza ai contenuti. Con Guy Vernes puoi: anche i piccoli dettagli fanno la differenza.

Vantaggi

Con questo effetto attenzione ai contenuti e svago per gli utenti sono assicurati. Le aziende potranno fornire dettagli ricorrenti, pubblicizzare il proprio brand e allo stesso tempo creare quell’effetto ipnotico che induce i consumatori a comprare. Ad esempio un viaggiatore incallito, grazie all’effetto parallasse e alle letture creative, potrà godersi il racconto e il viaggio stando comodamente a casa. In tempi di Covid questa è stata una vera e propria genialata.

Un’osservazione che un utente potrebbe fare è: l’effetto parallasse rallenta il mio computer? La risposta è: assolutamente no perché l’effetto utilizza dei codici chiari e puliti che non consentono blocchi o scatti del sistema, tali da intaccare il computer.

Svantaggi

La domanda principale che si sono posti i consumatori o proprietari di siti web è: ci sono degli svantaggi? In realtà uno dei tanti che salta subito all’occhio è paradossalmente l’abbondanza di animazioni. Un utente potrebbe stancarsi, nel corso del tempo, di osservare lo stesso effetto più volte. Questo potrebbe creare monotonia e mancanza di risultati.

Inoltre ci possono essere problemi nello scrolling: per quanto possa essere lo strumento più semplice, alcuni siti web presentano problemi per tablet e mobile. La pesantezza delle immagini e delle animazioni potrebbe non consentire movimenti regolari e rapidi all’interno della pagina.

Come applicarlo nelle landing page?

E’ possibile impostare l’effetto parallasse nelle Landing page? la risposta è si! Invece di scaricare JavaScript o altri programmi complessi puoi utilizzare dei plugin specializzati come quelli che ti illustriamo adesso. Non avrai nessun tipo di difficoltà e potrai notare dei miglioramenti nel tuo sito. Ti elenchiamo alcuni più popolari:

1. ScrollMagic: è il best seller tra i plugin specializzati. Ti permette di creare animazioni di foto mentre gli utenti sono in movimento. Può essere personalizzabile e non ha molto peso a livello di memoria;
2. Skrollr: il suo motto è “let’s get scrolling”, proprio perché permette di scrollare gli effetti mentre un utente visita la tua pagina. La sua caratteristica è utilizzare i dati per qualsiasi elemento HTMLHTML è l'acronimo di Hyper Text Markup Language, in italiano Linguaggio di Contrassegno per Ipertesti. Non si tratta di un linguaggio di programmazione, ma di un sistema che permette di...;
3. Pagina Piling: ha una semplice funzione: creare uno “scroll”, ovvero un movimento, per diversi modelli di design, sovrapponendoli uno sopra l’altro. Appena aprirai la finestra, contemporaneamente ne usciranno altre 4, 5, tutte insieme, una accavallata all’altra. L’animazione è proprio questa su più livelli;
4. L’ultimo, non per importanza, è Stellar. Come il nome stesso afferma, è stato creato proprio per rendere stellare l’effetto parallasse. Cosa vuol dire? Mentre stai scegliendo il tema del tuo sito web puoi lavorare con gli effetti in profondità, animandoli.

Conclusioni

Eccoci qui. Siamo giunti alla fine di questo articolo. Ora sarai in grado di sperimentare l’effetto parallasse per le tue Landing page e non solo. Potrai rendere finalmente giustizia a tutti quelli che non avevano ancora visitato il tuo sito per pigrizia o mancanza di dettagli. Per questo, ora che sai come animare le tue foto e i tuoi video, ci aspettiamo un feedback. Siamo curiosi di sapere, e se non ti è chiaro qualcosa contattaci pure. Mailsenpai è sempre a tua disposizione!