Personal tools
Scroll e Parallasse: una moda passeggera o il web trend del 2013?

A proposito di scroll, parallasse e prospettive...

Aug 07, 2013

Scroll e Parallasse: una moda passeggera o il web trend del 2013?

Un piccolo ma succulento showcase di siti che hanno applicato con successo parallasse e "scroll-animation" con risultati spettacolari e interazioni accattivanti

Mario BrosOgni post che si rispetti inizia con una sbirciatina su Wikipedia: "la parallasse è il fenomeno per cui un oggetto sembra spostarsi rispetto allo sfondo se si cambia il punto di osservazione".

Un esempio che tutti ricorderanno: Mario Bros. Nella lunga corsa del protagonista attraverso lo schermo, le nuvole, i monti, gli ostacoli sul percorso si spostano da destra a sinistra a velocità diverse per aumentare il realismo della profondità.

Nel web la tecnica riproduce esattamente lo stesso effetto, ricreando una sorta di pagine multi-strato con livelli contenenti elementi grafici diversi che allo scroll verticale (o al movimento del mouse) si muovono in modo asincrono.

Alcuni casi reali valgono più di mille parole.

 

Dangers of Fracking

http://dangersoffracking.com/

Dangers of Fracking

Quando la denuncia contro una particolare forma di inquinamento viene raccontata in questo modo può colpire anche gli animi più disinteressati.

Ultimate Ears

http://www.ultimateears.com/en-us/boom

Ultimate Ears

Non solo parallasse: date un'occhiata anche alla visualizzazione delle informazioni tecniche sul prodotto in diversi punti della pagina.

Una nota di colore per colleghi e conoscenti: dì un po', Andrea, quand'è che sei diventato testimonial delle Ears?? ;-)

 

Philips Norelco

http://www.idfaqme.philips.com/

Philips Norelco

Mi chiedo se il vero target del sito non sia la moglie/fidanzata del futuro utilizzatore del nuovo rasoio Philips... Tranquilli, non è VM18 ;-)

The Brave

http://thebrave.pl/

The Brave

"Scroll down if you're brave" la dice lunga. I cambi di scena sono al limite del cinematografico e l'effetto splatter è convertito in un filo conduttore caramelloso grazie alla sostituzione del rosso con un bel rosa succulento.

MonsterChe vi devo dire...
a me quell'occhietto ispira
la stessa simpatia di questo →

Case 3D

http://www.case-3d.com/

Case 3D

Bellissimo gioco di maschere e livelli. Non fermatevi alla homepage: un'occhiata la merita anche la presentazione del team, dove con una perfetta sovrapposizione di foto nelle dovute proporzioni si realizzano improbabili e divertenti collage facciali.

Sam Markiewicz

http://sammarkiewi.cz/

Sam Markiewicz

Un designer e il suo mondo: Earl Grey per concentrarsi, un po' di musica, gli strumenti del mestiere e, perché no, un gatto come motivatore!

Flandria

http://www.flandriatype.com/

Flandria

Sito dedicato al font omonimo: non potrebbe avere una presentazione migliore!

3bdesign

http://www.3bdesign.it/

3bdesign

Metti un frontend developer nostrano con la passione per il the, lascia in infusione quanto basta e ottieni un portfolio ricco di aromi British-style!

Bagigia

http://www.bagigia.com/

Bagigia

Quando la borsa dell'acqua calda diventa uno zaino di design: se la presentazione del prodotto fosse stata realizzata con la classica foto-polaroid, ferma nel tempo e nello spazio, avrebbe avuto la stessa attrattiva? Personalmente avrei perfino faticato a credere che fosse vera :-)

Altro inciso tra colleghi: Ale, non è questo il genere di bagigie che ti piacciono, vero? ;-)

Guest star

Aggiungo in coda anche un'eccezione: non è propriamente parallasse ma "l'effetto wow" vale la menzione tra i siti a scroll!

Nuovo Mac Pro by Apple

http://www.apple.com/mac-pro/

Mac Pro

Potrebbe anche essere un semplice portapenne, ma... non lo vorreste subito sulla scrivania? :-)

 

Alcune considerazioni a margine

Sia da utente che da designer, sono sempre stata sensibile al fascino attrattivo di questa tecnica: ho sempre l'impressione di poter controllare il layout con un tocco di rotella, di essere l'artefice della sua trasformazione... fa qualcosa, si muove al mio comando, cambia solo se interagisco con lui.

Per chi volesse cimentarsi nella difficile arte del marionettismo di siti, basta una veloce ricerca in Google per trovare tutorial e how-to. Ai più pigri risparmio la fatica con questa pratica e comoda raccolta.

Al di là della selezione che ho proposto nel post, dove ho cercato di diversificare i casi d'uso, ho avuto l'impressione che la maggior parte dei siti che "osano" di più nella sperimentazione di queste e altre tecniche siano di freelance, web agency e studi di design e comunicazione. Mi sorge un dubbio... forse la tecnica fa breccia nell'interesse del potenziale cliente ma quando si tratta di applicarla al suo sito entra in gioco un cauto timore reverenziale? Un sentore di nerdismo grafico da cui tenersi alla larga? Un classico "Bellissima, ma a me serve qualcosa di più semplice [ma accattivante... NdR]"? Suvvia, un po' di coraggio! :D

Filed under: , , ,
comments powered by Disqus