Dopo il suo debutto online nel 2011, l'effetto di parallax scrolling ha suscitato grande interesse come nuova ed eccitante tendenza del web design. Molte tendenze nel web design si sono succedute negli anni, ma il parallax scrolling è qui per restare, come una delle risorse fondamentali per il design del tuo sito.
Quando stai creando un sito web, il parallax scrolling è un ottimo modo per aggiungere profondità e movimento all'esperienza di navigazione. Qui sotto troverai una spiegazione completa di cos'è il parallax scrolling, oltre a dieci esempi di siti web da cui prendere spunto e alcuni template per iniziare.
Che cos'è il parallax scrolling?
Il parallax scrolling è una tecnica di web design dove lo sfondo del sito web si muove ad un ritmo più lento rispetto a ciò che si trova in primo piano. Questo si traduce in un effetto 3D quando i visitatori scorrono il sito, aggiungendo un senso di profondità e creando un'esperienza di navigazione più coinvolgente.
Il parallax scrolling si basa su un'illusione ottica. Poiché l'occhio umano percepisce gli oggetti vicini a noi come più grandi di quelli più lontani, percepiamo gli oggetti lontani come se si muovessero più lentamente.
Questa illusione è stata a lungo adottata attraverso diversi mezzi, favorendo un effetto realistico. Il suo primo utilizzo è stato nell'animazione tradizionale, già ai tempi di Biancaneve e i sette nani della Disney, e in videogiochi come Super Mario.
Con i progressi nei linguaggi CSS e HTML, gli effetti di parallax scrolling si sono poi evoluti nel mondo del web design fino ad arrivare ai risultati che conosciamo oggi.
Ecco quindi dieci notevoli esempi di parallax scrolling creati con Wix, per farti trovare l'ispirazione per il design del tuo sito web.
Esempi di parallax scrolling
01. Mild Design
Emilie De Grosbois, artista a Montreal e fondatrice di Mild Design, può darci uno o due suggerimenti su come creare un portfolio. Il suo sito di portfolio personale colpisce i visitatori con un benvenuto impressionante: una serie di intricate immagini a tutto schermo visualizzate in un lungo scorrimento. Queste sono alcune delle migliori immagini di siti web che abbiamo visto.
Con l'uso del parallax scrolling , la transizione da un'immagine all'altra diventa non solo più fluida, ma aggiunge anche un senso di profondità, come se le immagini scivolassero delicatamente l'una sull'altra.
02. Nolan Omura
Nolan Omura è un fotografo e videografo delle Hawaii, specializzato in fotografia subacquea. Il suo ingegnoso approccio all'effetto di parallax scrolling aggiunge profondità e movimento al design già accattivante della sua homepage.
Dividendo la pagina in strisce a tutta larghezza, i visitatori del sito sono accolti da divertenti scatti di vita acquatica ogni volta che scorrono più in basso. Le strisce galleggiano delicatamente l'una sull'altra, usando un mix di effetti di reveal e di parallax scrolling.
A dare alle fotografie ancora più movimento ci sono minuscole animazioni. Mentre queste sono a malapena distinguibili, le animazioni del sito web - combinate con l'uso di parallasse e video - rendono questa pagina viva.
03. Chris Covert
L'audace sito web dell'ingegnere aerospaziale Chris Covert è tanto professionale quanto innovativo. Il design e l'interattività del suo sito riescono a far parlare la personalità di Chris attraverso quello che, altrimenti, avrebbe potuto essere un arido elenco di abilità ed esperienze formative.
Chris colloca scatti del suo CV stampato e del suo biglietto da visita al centro dello schermo. Usando l'effetto di scorrimento reveal, le immagini di sfondo del sito cambiano rapidamente, mentre le immagini del CV e del biglietto da visita rimangono ferme, ottenendo un risultato sorprendente.
Prestando molta attenzione, anche al più piccolo dei dettagli, questo sito fornisce un'ottima risposta alla domanda su come scrivere un curriculum. Include inoltre un documento PDF scaricabile e stampabile del CV, per potenziali datori di lavoro.
04. Ivy Chen
L'uso del parallax scrolling da parte della designer e illustratrice Ivy Chen crea un sito web unico, in cui le sue opere vengono rivelate gradualmente, come per magia, grazie al parallax scrolling.
L'uso che Ivy fa dell'effetto di parallax scrolling non è solo ipnotizzante, ma amplifica e spiega il contenuto della pagina. Come designer multidisciplinare, opera all'intersezione tra illustrazione e design grafico. Le due discipline sono integrate in modo fluido nel suo sito, con le sue illustrazioni di moda che si trasformano lentamente in abiti reali mentre scorriamo.
Il sito web della designer di gioielli Hila Rawet Karni impiega il parallax scrolling per creare un'esperienza di navigazione interessante e sfaccettata. Stratificando immagini e testo l'uno sull'altro e facendoli muovere a velocità diverse, la pagina sembra cambiare costantemente, formando nuove composizioni mentre si scorre. Il look stratificato aiuta siti di piccole imprese, come questo, a stare al passo con le ultime tendenze del web design.
Nota, per esempio, come la foto centrale di una donna seduta rimane al suo posto mentre altri elementi le si affiancano. Anche questa foto alla fine scivola fuori dallo schermo, facendo spazio ad altre sezioni del sito, dando così una sensazione dinamica.
06. Barco Sorriso
Illustrazioni digitali e una tavolozza di colori vivaci conferiscono un tono allegro e accogliente a questo sito web no-profit. La piega superiore raffigura una barca nell'oceano, appropriato per un'organizzazione il cui nome significa 'La barca del sorriso' in portoghese.
Mentre scorriamo questo sito multilingue, tuttavia, la vista dell'oceano della prima piega viene gradualmente oscurata dietro il verde della seconda. Questa elegante transizione, ottenuta con l'uso del parallax scrolling, porta alla mente gli strati e la profondità dei film d'animazione o dei videogiochi.
07. Karlie Kloss
Questo sito web elegante e pulito è il perfetto portfolio per la top model Karlie Kloss. La combinazione di colori del sito punta alla semplicità nelle sue scelte di bianco, grigio e nero, e così anche le generose quantità di spazio bianco.
Allo stesso tempo, questo look di classe è combinato con piccoli tocchi che mantengono il sito unico: l'uso sottile del rosa, il pesante font nero, e il senso di movimento impresso dal parallax scrolling e dall'uso dei video.
08. Hana Knizova
Il sito della fotografa Hana Knizova, basata a Londra, presenta un lungo scorrimento di immagini rivelate e oscurate usando il parallax scrolling.
Le foto sulla homepage sono un'introduzione ai vari progetti e alle molte specialità di Hana come fotografa, dall'editoriale, al ritratto ai servizi fotografici di maternità.
Allo stesso tempo, le immagini fungono anche da menu del sito, creando un sistema di navigazione unico dove ogni immagine porta a una pagina interna diversa.
09. Frankie Ratford
Il sito personale del designer grafico, nomade digitale e imprenditore Frankie Ratford è colorato, vibrante e frizzante.
La piega superiore dai colori solari presenta diversi strati di parallax scrolling. Mentre la stessa Frankie rimane statica, in un ritratto spontaneo, in cui ci si può identificare, il suo nome scorre verso l'alto da dietro la foto, seguito da una sezione biografica che scivola sopra la stessa immagine.
Il resto di questo sito di design grafico fa un uso più sottile del parallasse per mostrare vari dettagli informativi.
Abilitare il parallax scrolling sul tuo sito Wix
Per abilitare il parallax scrolling sul tuo sito Wix, usa strisce che hanno uno sfondo a colori, immagine o video. Combinare più strisce insieme può arricchire l'effetto.
1. Nell'Editor, clicca su "Aggiungi" nel menu a sinistra, poi scegli "Striscia"
2. Clicca su "Cambia sfondo striscia". Qui puoi cambiare lo sfondo con un colore, un'immagine o un video di tua scelta
3. Clicca su "Impostazioni" sullo sfondo della striscia, e sotto "Effetti di scorrimento" scegli l'effetto desiderato (Parallasse, Rivelazione, Zoom-In o Fade-In)
4. Controlla l'effetto in azione nella modalità Anteprima e modificalo se necessario
1. Nell'Editor, clicca su "Cambia lo sfondo della pagina"
2. Clicca sull'icona "Impostazioni" sull'immagine di sfondo
3. Sotto "Effetti di scorrimento", seleziona "Parallax"
Template di siti web con parallax scrolling
Per iniziare facilmente, scegli uno dei nostri tanti template progettati con il parallax scrolling integrato, e personalizzalo a seconda delle tue esigenze.
Abbiamo selezionato tre modelli di questo tipo per aiutarti a creare un sito web:
Negozio online di prodotti per la cura della persona: questo template per un sito ecommerce presenta i suoi prodotti su sfondi solidi e puliti. Allo stesso tempo, il parallax scrolling è applicato alle foto di persone che interagiscono con i prodotti, mettendole in evidenza e rendendo l'esperienza più interattiva.
Panificio: questo template fa venire l'acquolina in bocca, ed è composto da diverse strisce a tutto schermo con parallax scrolling. Un video sulla terza striscia aggiunge un ulteriore senso di movimento.
Portfolio per un fotografo: questo template di parallax a più livelli raggiunge un look sofisticato con uno sfondo a gradiente che cambia colore e uno strato statico di tipografia.
