Gli effetti di parallasse rimangono uno dei trend di design del web più caldi. Questa tecnica di scorrimento animato si verifica quando lo sfondo e il primo piano si spostano a velocità diverse mentre l'utente scorre in modo che ci siano due livelli indipendenti che si muovono contemporaneamente.
Questo effetto può essere utilizzato per qualsiasi numero di tipi di siti Web ed è un modo divertente per creare e aumentare il coinvolgimento degli utenti. La cosa bella degli effetti di parallasse è che non devi usarli su ogni pagina di un disegno; lo scrolling della parallasse è un'ottima tecnica di homepage per aiutare gli utenti a invitare all'azione o ad altri contenuti.
Gli effetti di parallasse creano un elemento di profondità e distanza e un senso più ampio tridimensionale rispetto ad altre tecniche, facendo sentire gli utenti parte del design.
Il lato negativo degli effetti di parallasse è che non funzionano sempre sui dispositivi mobili. (Ma ci sono alcuni workaround per quello pure nel tutorial alla fine di questo articolo.)
Qui ci sono cinque effetti di parallasse e stili da considerare. (Assicurati di fare clic sui collegamenti per vedere esattamente come funziona ogni animazione.)
1. Animazione per mostrare il cambiamento
Usa gli effetti di parallasse per mostrare i cambiamenti in un progetto. Strati di movimento possono trasmettere una distanza nel tempo, nello spazio o nel luogo.
Gli effetti di parallasse migliorano il cambiamento delle vetrine quando funzionano con il contenuto del sito web.
Porsche Evolution, sopra, mostra cambiamenti nel tempo con le modifiche allo sfondo e alla macchina in primo piano in ogni immagine. (Alza il volume e la musica cambia di decenni).
Il design consente agli utenti di scorrere perché vuoi vedere come sarà la prossima. Questa tecnica può funzionare in ordine cronologico (come visto qui) o in ordine cronologico inverso. E una chiave per farlo funzionare è che questo sito funziona in entrambe le direzioni - anche la musica risale - se si scorre verso l'alto contro verso il basso.
Sonance utilizza la parallasse per mostrare un altro tipo di modifica: modifica della posizione in tutto il progetto. Gli effetti di parallasse fanno parte del modello generale di navigazione del sito web e c'è un segnale di dove gli utenti del design (location) hanno tutta l'esperienza.
2. Incoraggiare lo scorrimento
Il motivo per cui gli effetti di parallasse possono aiutare a creare engagement è perché incoraggiano lo scrolling per mantenere gli utenti che interagiscono con il design per un periodo di tempo più lungo.
Molti progetti con effetti di parallasse includono uno scroll? istruzioni o cue direttamente sulla home page per incoraggiare questa interazione dall'inizio. (La home page di The Walking Dead Zombiefied include questa istruzione sulla pagina prima dell'immagine in primo piano sopra).
Il sito web di The Walking Dead fa qualcosa di diverso con la parallasse per incoraggiare l'interazione: lo scorrimento porta gli utenti sullo schermo mentre il personaggio si muove attraverso diversi pannelli a fumetti, piuttosto che su e giù.
3. Movimento e colore
Uno dei modi più divertenti per usare lo scrolling di parallasse è quello di incorporare il colore in diversi pannelli? per mostrare elementi o progetti di portfolio. Il cambio di colore e l'animazione possono significare qualcosa di nuovo.
Il colore è anche uno strumento di progettazione che attira l'attenzione che può aiutare a attirare gli utenti.
Werkstatt, sopra, utilizza un contorno bianco e grigio iniziale con strati di parallasse tra elementi e testo. Ma un'ulteriore azione al passaggio del mouse porta in vita ogni progetto con il colore. La combinazione di effetti funziona bene perché il resto del design è semplice e incoraggia gli utenti a interagire con ogni singolo elemento.
Lois Jeans prende un altro approccio di parallasse usando il colore. Ogni nuovo colore evidenzia una parte diversa della campagna di abbigliamento: gli acquirenti possono vedere i jeans su modelli in diversi ambienti naturali con fuoco, aria, acqua e terra.
4. Rendere le informazioni più facili da digerire
Gli effetti di parallasse possono aiutare a rendere le informazioni complesse o blocchi di testo pesanti più piccoli, più leggibili e più facili da digerire. È un concetto interessante quando si pensa al tipo di movimento, ma la pratica effettiva riguarda lo spostamento di contenitori che contengono il tipo.
Gli esempi sopra mostrano due diverse applicazioni di questo concetto.
Melanie David ha una lunga introduzione su di lei sullo schermo. Il lato sinistro che mostra l'elemento di navigazione - Informazioni su - non si sposta mentre gli utenti possono scorrere il testo sulla destra. Quando il blocco di testo termina, entrambi i lati della pagina si spostano nella sezione successiva. È un'ottima soluzione per un blocco di testo che è più lungo dell'area del contenuto visivo.
Il ristorante Le Duc utilizza blocchi individuali per le diverse sezioni del menu che si aprono in base al modo in cui leggere e ordinare gli alimenti. Le animazioni sono semplici con lo sfondo divertente del pesce - che racconta agli utenti qualcosa sull'edificio da pranzo - e rende il menu facile da digerire.
5. Visualizza? Digitale? Realtà
Uno dei più grandi usi degli effetti di parallasse è aiutare gli utenti a visualizzare qualcosa che altrimenti non possono vedere. Altri progetti utilizzano una combinazione di animazione tridimensionale e parallasse per creare esperienze più realistiche.
Questi disegni 3D tendono a cadere nel regno di un'esperienza più in stile cartone animato, come Madwell, sopra, ma possono anche avere un aspetto più VR quando il design funziona con un tipo specifico di dispositivo.
Uno dei classici esempi di un sito che usa gli effetti di parallasse che esiste da qualche tempo è il sito web di Seattle Space Needle. Usa una tecnica di scorrimento verso l'alto per imitare come apparirebbe per salire fino alla cima del punto di riferimento.
Lo scrolling parallasse sposta lo skyline contro l'interno dell'edificio con alcuni messaggi call to action e un'eccezionale barra di navigazione che mostra quanto è alto il luogo. Il design è educativo, avventuroso e mostra all'utente qualcosa di difficile da immaginare senza l'effetto animato.
3 grandi risorse parallasse
Sei pronto a creare un effetto di parallasse per il tuo prossimo progetto? Questi tutorial e snippet di codice ti aiuteranno ad aggiungere un effetto animato al tuo design che può aiutare a coinvolgere gli utenti e a farli coinvolgere più a lungo.
- Come creare un effetto di scorrimento parallasse: il tutorial di w3schools ti consente di creare effetti di contenitore in movimento e fornisce modi per utilizzare le query multimediali per ottenere un effetto simile sui dispositivi mobili.
- Demo del sito web di Parallax Scrolling: vedere esattamente come questa tecnica funziona con una semplice demo e spiegazione.
- 15 Affascinanti effetti di parallasse da CodePen: l'elenco mostra alcune fantastiche penne parallasse per far partire la tua creatività e puoi giocare con ognuna di esse.
Conclusione
Mentre gli effetti di parallasse sono alla moda e divertenti, non lo sono per ogni progetto. È anche importante considerare che alcuni utenti su alcuni dispositivi potrebbero avere difficoltà a navigare in un sito Web che include molte animazioni.
Prendi l'inventario dei tuoi utenti e le loro preferenze prima di aggiungere un effetto di parallasse. Inizia in piccolo con la parallasse in una posizione, come la home page, e monitora l'analisi per vedere se funziona per te (maggiore tempo sul sito è un indizio che funzioni).
Usa la parallasse quando funziona con i tuoi contenuti e i tuoi messaggi. Questa tecnica alla moda dovrebbe essere divertente da progettare e interagire con.