14 splendidi siti web a scorrimento parallasse

Lo scorrimento parallasse “è in circolazione da un po ma è una di quelle tendenze del web design che continua ad andare avanti. Lo scorrimento parallasse si verifica quando il layout del sito Web vede lo sfondo della pagina Web spostarsi più lentamente in primo piano, creando un effetto 3D durante lo scorrimento. Usato con parsimonia, può fornire un piacevole e sottile elemento di profondità che si traduce in un sito Web distintivo e memorabile.

Per mostrare come dovrebbe essere fatto, ecco alcuni siti che impiegano la tecnica in modo brillante. In alcuni casi il parallasse scrolling è il protagonista dello spettacolo; in altri aggiunge semplicemente un tocco di profondità che fa sembrare che il primo piano risalti un po .

Se hai davvero voglia di spingere fuori la barca, questi impressionanti esempi di animazione CSS mostrano un altro ottimo modo per far risaltare il tuo sito web fuori dalla folla. E puoi anche dare unocchiata ai nostri migliori strumenti di web design che “ti aiuteranno nei tuoi sforzi di progettazione. Per ora, però, diamo unocchiata ad alcuni siti che utilizzano lo scorrimento parallasse nel modo giusto.

Storia dellarte del web design

La storia dellarte e del web design non sono argomenti che potresti necessariamente mettere insieme, ma sono meravigliosamente uniti in questo sito di storia dellarte del web design, che traccia il futuro del web design guardando larte nel tempo.

Qui sono in gioco una serie di tecniche di scorrimento parallasse, il che significa che gli utenti sono costantemente sorpresi e deliziati mentre scorrono la pagina verso il basso. Vale la pena dedicare un po di tempo ad esplorarlo.

Il catalogo interattivo Qode

Il catalogo interattivo Qode ha un sistema di navigazione con testo in basso stilizzato da rivelare unimmagine per ogni articolo. Facendo clic sul catalogo, viene visualizzato lo scorrimento della parallasse orizzontale utilizzato per mostrare una gamma di temi WordPress. Non è luso più rivoluzionario dello scorrimento parallasse in questo elenco, ma serve bene al suo scopo. Anche una spruzzata di animazione viene utilizzata con buoni risultati.

Canals

Progettato da Marcus Brown e sviluppato da Aristide Benoist, Canals ti accompagna in un viaggio di 400 anni attraverso la storia dei canali di Amsterdam del XVII secolo. Il sito è progettato per fornire unesperienza in stile editoriale , come sfogliare un lussureggiante volume di tavolino da caffè, e fa un grande uso del parallasse per attirare la tua attenzione su nuove sezioni della sua storia e per dare al sito un sottile effetto di profondità.

La storia dei Goonies

A chiunque abbia una certa età è garantito lamore “80s te it film davventura, I Goonies, e se sei tu, questo sito ti farà sicuramente pulsare le ghiandole della nostalgia. Creato da Joseph Berry utilizzando WebFlow, The Story of The Goonies è un tributo a un classico retrò che utilizza lo scorrimento parallasse per coinvolgerti nella storia, presentarti i personaggi e rivelare la modalità del film.

Dogstudio

Lattrazione centrale immediata del sito di Dogstudio è un bellissimo cane animato in 3D – o è un lupo? – al centro della pagina, che si ridimensiona e ruota mentre scorri verso il basso nella pagina parallasse. La sua illuminazione cambia colore quando passi il mouse sui titoli dei progetti recenti di Dogstudio, e forse la nostra parte preferita è quando ruota davanti a parte della copia della pagina, oscurando parte del testo.

ToyFight

ToyFight è unagenzia creativa pluripremiata e il suo sito web è molto divertente. I fondatori Jonny Lander e Leigh Whipday si sono trasformati in figure 3D, che compaiono in una serie di scene in tutto il sito (incluso questo sfacciato riferimento a Sagmeister & Walsh). Un uso intelligente della parallasse amplifica leffetto 3D e, abbinato a sfondi audaci, luminosi e semplici, non diventa mai opprimente o irritante.

Diesel: BAD Guide

84.Paris ha creato questo impressionante sito Web Parallax (e la relativa campagna sui social media) per accompagnare il lancio della fragranza BAD di Diesel. Il sito di una pagina presenta la serie di regole che compongono la “BAD Guide”.

Lutente può esplorare trascinando il mouse sulla pagina di parallasse, che è disposta come una bacheca di immagini su cui fare clic. Ci sono consigli su tutto da Tinder (“Scorri a destra, a destra, a destra, a destra – le ordinerete out later “) su Instagram (” Non dimenticare di metterti in contatto con un ex giovedì #TBT “), accompagnato da illustrazioni monocromatiche.

Firewatch

Uno dei Gli esempi più belli di scorrimento parallasse che abbiamo visto è questo sito Web per il gioco Firewatch, che utilizza sei livelli mobili per creare un senso di profondità. È fantastico perché non esiste alcun dirottamento dello scorrimento (qualcosa che spesso accompagna leffetto di parallasse) ed è utilizzato solo nella parte superiore della pagina: il resto del sito è ancora in modo da poter leggere le informazioni senza soffrire di mal di mare. Se vuoi vedere come è fatto, ecco una bella demo su CodePen.

GitHub 404

La pagina 404 di GitHub “non è strettamente parallasse come lo scorrimento si verifica quando si muove il mouse invece di scorrere, ma è una pagina davvero divertente che utilizza la stratificazione per aggiungere profondità. A differenza del parallasse “corretto”, lo sfondo si muove più velocemente del primo piano, creando unatmosfera disorientante e ultraterrena.

Jess & Russ

Non sorprende che il sito web del matrimonio di Russ Maschmeyer e Jessica Hische sia una bellezza da vedere. Il sito traccia la loro storia romantica, con lo scorrimento del parallasse utilizzato per aggiungere profondità alle illustrazioni. Si sono sposati nel 2012, ma vale ancora la pena dare unocchiata al sito web.

Make Your Money Matter

Finanza e denaro non sono certo le materie più interessanti. Ma lagenzia digitale con sede a New York Firstborn è contenta di questo sito Web dinamico a scorrimento parallasse Make Your Money Matter for the Public Service Credit Union.

Con lobiettivo di insegnare al pubblico i vantaggi delladesione a ununione di credito, invece di utilizzare una banca, questo brillante sito include di tutto, da come funziona ununione di credito, a dove trovarne una e come fare domanda, oltre a un calcolatore che mostra quanto le banche traggono profitto dai depositi dei clienti.

Madwell

Lagenzia di progettazione e sviluppo Madwell, con sede a New York, mostra il suo portfolio con una gamma di effetti di scorrimento parallasse per creare uno stile 3D evidente che aggiunge un enorme quantità di profondità.

New York Times: Tomato Can Blues

Nellera odierna di scarsa attenzione e media di piccole dimensioni, come attiri le persone verso il giornalismo di lunga durata? Tomato Can Blues è unottima risposta a questo problema dal New York Times, combinando alcune tecniche intelligenti di web design con narrazione e illustrazioni ispirate ai fumetti create da Atilla Futaki.

Uno dei migliori esempi di scorrimento parallasse che abbiamo “Ho visto, larticolo ti guida attraverso la storia di un combattente in gabbia scritta da Mary Pilon. Mentre scorri il contenuto, le illustrazioni si animano con animazioni e modifiche intelligenti, permettendoti di immergerti completamente nel contenuto.

Le illustrazioni di Futaki si basavano su documenti della polizia, resoconti di testimoni, fotografie e note del giornalista, e lattenzione ai dettagli traspare. Tutto sommato “è una grande esperienza di lettura: è questo il futuro del giornalismo online ?

Neve caduta

Uno dei primi siti a Spingi davvero i confini su ciò che potresti fare con contenuti editoriali di lunga durata online, larticolo “Snow Fall” del New York Times combina una gamma di elementi diversi, tra cui lo scorrimento della parallasse e i video web.

Larticolo, sullorrore di una valanga a Tunnel Creek, è stato pubblicato online nel dicembre 2012 ma è ancora un esempio di ciò che puoi fare con lo scorrimento parallasse. Il giornale ha presentato larticolo vincitore del Pulitzer in un modo innovativo che ha catturato lattenzione della comunità del design in tutto il mondo.

• 19 responsive davvero utili tutorial sul web design
• migliori dischi rigidi esterni
• Pagine di errore 404 dal design brillante