Effetto parallasse: il principio di un look vispo

28 Settembre 2012
Microtag Project

Alcuni la conosceranno bene, altri magari preferiscono rinfrescare il ricordo sbiadito di una vecchia lezione scolastica: parliamo della parallasse.

Tranquilli, in realtà il concetto di parallasse può essere compreso facilmente pensando a un’esperienza molto comune: il treno. O la macchina, se vi trovate al lato passeggero. Adesso immaginiamo di guardare il panorama dal finestrino: il guardrail e i pali elettrici sembrano sfrecciare velocissimi, mentre allungando lo sguardo verso gli edifici o i campi ci appare tutto più lento, infine le montagne o qualunque elemento all’orizzonte lo notiamo quasi fermo.

Questo effetto percettivo è legato alla parallasse, nota già agli antichi astronomi Greci e sintetizzabile come lo spostamento apparente di un oggetto al variare della posizione di chi l’osserva. La finalità che ci proponiamo è di riprodurre un effetto animato che somigli all’esperienza del treno.

Dato un insieme di elementi in movimento si simula l’effetto parallasse agendo sulla velocità di ciascuno: il punto di osservazione può essere statico (un pulsante per esempio) o dinamico (il cursore del mouse). In ogni caso il guizzo dell’animazione incuriosirà piacevolmente il visitatore.

Di seguito, una raccolta di link per sfruttare al meglio l’effetto parallax nel web design.


Parallax slider in jQuery

Tutorial per creare un gallery slider con un effetto parallasse per spostare diversi sfondi quando si scorrono le immagini creando una prospettiva ed una profondità piacevole.

Scrolling Parallasse web based

Jarallax, libreria javascript open-source, che permette di generare un effetto visivo parallasse, permettendo, allo scrolling del mouse, il movimento di oggetti a velocità diverse tra loro.

jQuery Parallax

Layer che si muovono tra loro in risposta al movimento del mouse. A seconda delle loro dimensioni questi livelli si muovono a velocità diverse, in una sorta di effetto parallax.

Parallax content slider in jQuery e CSS3

Ottimo parallasse slider. Durante lo scorrimento della slide, e, grazie al CSS, potete animare ogni singolo elemento in modo differente.

jQuery Parallax Tutorial - Animare banner header background

Tutorial che spiega nel dettaglio come creare il proprio effetto di sfondo parallasse utilizzando jQuery, per gestire gli aspetti di animazione di un banner o di un header background.

CSS3 Slideshow con effetto Parallasse

Un CSS-only slideshow con qualche effetto parallasse sullo sfondo.

Scrolling parallax per lo scorrimento verticale del sito

Come creare un sito a navigazione (scroll) verticale con jQuery e Css.

Showcase di effetti parallasse utilizzati nel web design

Esempi di siti web da cui prendere ispirazione o vedere in azione l'effetto parallax.

25 esempi di Parallax Scrolling

Lista di siti web che utilizzano il parallasse scrolling.

Parallax Premium

Trovato niente di interessante. Eccovi una serie di script a pagamento da utilizzare anche in WordPress

articoli... che potrebbero interessarti

creare un sito web... articoli consigliati

Azioni Photoshop, la raccolta definitiva

La collezione di azioni photoshop che vi presentiamo sono un set di azioni che accorrono in aiuto degli utenti per realizzare progetti rapidi e ben fatti.

Web design & Video background

Presentare la propria homepage in modo efficace con video background e comunicare contenuti e temi con video che esprimono il cuore del tuo sito web!

Tipped: i tooltip più belli senza il minimo sforzo

Si chiama Tipped e rivoluzionerà lo user interface design del vostro sito. L'applicativo offre un'ampia gamma di tooltip, belli e fruibili su tutti i dispositivi.

Dropdown menu css. Un componente responsive e facile da personalizzare

Organizza la navigazione del tuo sito con un responsive mobile menu. MegaDropdown è ideale per gli ecommerce e i portali di grandi dimensioni.

Template WordPress Responsive Free – Minimaluu

Minimaluu è la soluzione ideale per il tuo portfolio su WordPress se cerchi una grafica minimale, pulita e compatta ma anche fluida ed efficiente.

Sei un Webmaster? Il tuo sito web ha bisogno di Best 4 Webdesign!

Best4WebDesign archivia i principali e i migliori strumenti per Webmaster e Web Designer.