Parallax Scrolling: 16 esempi e tutorial

by Janeth Kent Date: 09-04-2020 jquery risorse tutorial tips parallax design javascript

La parallasse è, come recita Wikipedia,

il fenomeno per cui un oggetto sembra spostarsi rispetto allo sfondo se si cambia il punto di osservazione.

Il parallax scrolling (effetto parallasse) è una tecnica particolare di scorrimento utilizzata in computer grafica.
L’effetto visivo della parallasse simula un fenomeno 3D su oggetti bidimensionali. Semplicemente al movimento del mouse si muovono i diversi strati, che non sono altro che delle immagini posizionate una dopo l’altra.

Creando l'illusione che ci sia uno sfondo e delle figure in primo piano, riesce a ingannare il nostro cervello facendogli credere che stiamo guardando un paesaggio 3D.

Sintetizzando, l'effetto Parallax, si basa su un fenomeno di percezione chiamato "parallasse", che consiste nella posizione di un oggetto nel campo visivo che cambia a seconda del punto da cui viene osservato.

Se vi sembra complicato, faremo un esperimento molto semplice in modo che possiate vederlo con i vostri occhi:

- Osservate un oggetto che si trovi a un paio di metri da voi (per esempio, un'immagine sul muro, una foto o una finestrai).
- Allunga il braccio con il pollice verso l'alto.
- Coprite l'occhio sinistro e osservate la posizione del pollice rispetto all'oggetto di riferimento sullo sfondo.
- Ora coprite l'occhio destro e osservate il cambiamento... sorpresa!

La stessa tecnica di animazione di Parallax non è una novità, dato che è stata utilizzata nei film d'animazione e persino nei videogiochi degli anni '80. 
Parallax è una risorsa molto utile per migliorare l'attrattiva dei siti web e per incoraggiare gli utenti a rimanere più a lungo e ad interagire con loro. 

Poiché l'effetto si manifesta con lo scorrimento, gli utenti hanno un incentivo in più a navigare. Inoltre, è perfetto per la navigazione in schermi verticali, come quelli dei telefoni cellulari.

Il Parallax scrolling è una delle soluzioni più semplici su cui i webmaster possono contare, soprattutto se vogliono ottenere un impatto immediato sulla visita del sito, un tempo di caricamento più veloce e effetti interessanti di cui la gente può godere.

Ci sono molte risorse online che offrono tutorial sul Parallax. 

Se volete cimentarvi con questa particolare tecnica, abbiamo selezionato per voi una lista di 16 risorse ed esempi da cui prendere ispirazione.

1. ScrollDeck con jQuery Parallax plugin  DEMO

È un interessante plugin jQuery che rende più facile la creazione di incredibili presentazioni a scorrimento come Slide Animations, Image Slides ed effetti di parallasse per il vostro progetto.

2. Super Scroll Orama DEMO

Super Scroll Orama jQuery plugin uno dei plugin più conosciuti. NOTA: non più in fase di sviluppo attivo.

3. Page Pilling DEMO

Questo plugin jQuery permette di creare diversi " livelli" per il design del vostro sito web, che sono sovrapposti l'uno sull'altro. Quando si scorre o si accede all'URL, viene attivata un'animazione a diapositive per rivelarli. Il Page Piling è compatibile con tutte le piattaforme (computer, tablet e cellulari) e funziona nella maggior parte dei browser.

4. Stellar DEMO

Un plugin jQuery progettato per facilitare l'implementazione dello scrolling di Parallax. L'animazione di ogni elemento può essere configurata individualmente usando gli attributi dei dati. Permette anche di creare sfondi che si riposizionano durante lo scrolling e ritornano alla loro posizione originale al termine dell'animazione.

5. jParallax DEMO

6. ScrollMagic:  DEMO

Uno dei plugin jquery più popolari e funzionali. Permette di creare effetti di animazione in base alla posizione dello scroll: è possibile lasciare gli oggetti fissi, spostarli o animarli mentre ci si sposta sullo schermo, oltre a creare effetti Parallasse. È altamente personalizzabile, leggero e dispone di una buona documentazione e di risorse esterne.

7. jQuery Scroll Path DEMO

8. StarScroll DEMO

Un plugin jQuery che va dove nessun plugin è stato prima - creando un campo stellare a scorrimento in parallasse.

9. Parallax.js DEMO

Reagisce all'orientamento del vostro dispositivo intelligente, compensando gli strati a seconda della loro profondità all'interno di una scena... Non avete un dispositivo con il giroscopio?

Non vi preoccupate, se non avete un giroscopio o un hardware di rilevamento del movimento, parallax.js sfrutta al loro posto la posizione del cursore.

10. freshD DEMO

Il plugin jQuery 3D Parallax Plugin anima magicamente i vostri oggetti in un mondo 3D creato in modo dinamico.

11. Skrollr (by Alexander Prinzhorn) DEMO

Il miglior vantaggio di questo plugin è la sua semplicità, dato che non richiede la conoscenza di Javascript o jQuery (con HTML e CSS è sufficiente). skrollr usa gli attributi dei dati per animare qualsiasi elemento HTML.

5 Examples of Parallax in Action

E infine, ispiriamoci un pó! Questi sono alcuni dei siti che stanno già utilizzando Parallax per ottenere effetti incredibili.

12. FireWatch

Questo sito è sicuramente riuscito ad ottenere il massimo dal Parallax, in quanto ha fino a 6 livelli che si muovono a velocità diverse per dare una sensazione di profondità. Scorrendo verso il basso, la pagina mostra le informazioni che si trovano nella prima pagina.

13. The Walking Dead

Qual è il percorso che poerta un attore a trasformarsi in zombie in The Walking Dead? Questa pagina lo spiega attraverso un'infografica in stile fumetto che fa un grande uso di Parallax negli sfondi. Così, sembra che il protagonista si muova davvero attraverso un mondo in 3D.

14. Peugeot Hybrid4

Questa graphic novel è un eccellente esempio di narrazione al servizio di un brand. Nel corso della storia, il sito web presenta le caratteristiche della nuova tecnologia Hybrid4.

L'utente può riprodurre il romanzo in modalità automatica o farsi carico personalmente dello scorrimento in modo che gli effetti siano attivati. Inoltre, il suono contribuisce anche a creare un'esperienza armoniosa.

15. NASA

Quale uso migliore di Parallax se non quello di illustrare la vastità dello spazio? In questa pagina, l'utente può intraprendere il proprio viaggio da esploratore spaziale e viaggiare di pianeta in pianeta su uno sfondo di stelle in movimento.

16. Avenir Clinic

Un esempio molto semplice, ma ideale per dimostrare che Parallax può servire a dare vita ai siti web di marchi di ogni tipo. In questo caso, si tratta di una clinica odontoiatrica che dispone di moduli colorati combinati che possono essere visualizzati su sfondo bianco. E in questo modo semplice, è riuscito a creare un sito web attraente che si distingue dalla concorrenza.

Banner vector created by upklyak - www.freepik.com
 
by Janeth Kent Date: 09-04-2020 jquery risorse tutorial tips parallax design javascript visite : 23664  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Articoli correlati

Come scaricare un'e-mail in formato PDF in Gmail per Android

Ora scoprirete quanto sia facile salvare un'e-mail ricevuta o inviata tramite Gmail in formato PDF, il tutto con il vostro smartphone Android. Gmail è una delle applicazioni di posta elettronica più…

Introduzione alle CSS Container Queries

Il responsive web design è una componente essenziale dello sviluppo web. Come sviluppatori front-end, dobbiamo preoccuparci continuamente della moltitudine di nuove risoluzioni e dispositivi. Va da se che creare una versione…

Un approccio a Java: switch statement

Ciao a tutti e bentornati! Dopo una pausa, torniamo oggi con un'altra parte del corso introduttivo alla programmazione, parlando di switch statement, conosciuto anche come costrutto di selezione multipla.  Intuizione L'idea dello switch statement…

Un approccio a Java: Il ciclo while

Ciao a tutti e bentornati! Dopo aver fatto una breve, ma corposa, introduzione sui cicli, andiamo oggi a vedere finalmente le prime implementazioni che utilizzano quello che abbiamo definito ciclo precondizionale. In Java, come…

Un approccio a Java: I cicli - Introduzione

Ciao a tutti e bentornati! Sino ad ora, abbiamo parlato di variabili e di strutture di selezione, andando a considerare alcuni degli aspetti fondamentali di questi due concetti. Teoricamente, per…

Un approccio a Java: strutture di selezione - casi d'uso

Ciao a tutti e bentornati! Sino ad ora ci siamo preoccupati di fare una carrellata quanto più completa riguardo i concetti fondamentali di cui abbiamo bisogno per approcciarci all'utilizzo delle…

Un approccio a Java: operatori booleani

La volta precedente, abbiamo ampiamente parlato delle variabili booleane, cercando di delineare quali siano le principali operazioni che si possono effettuare proprio a livello pratico.  Di tutti i casi esaminati, non abbiamo…

Un approccio a Java: le variabili booleane

Ciao a tutti e bentornati! La volta precedente, ho fatto un'introduzione alle strutture condizionali, definendo il loro funzionamento. Prima di poter dare qualche esempio pratico, è necessario chiarire in che modo ci…

Un approccio a Java: strutture condizionali

Ciao a tutti e bentornati! Le volte precedenti abbiamo introdotto il concetto di variabile, tentando di definire alcuni concetti basilari a riguardo.  Alcune situazioni fanno però intuire come il solo concetto…

Un approccio a Java: Le variabili - caso d'uso

Ciao a tutti amici e bentornati! Dopo l'introduzione fatta sulle variabili, cerchiamo di analizzare alcune criticità che si possono presentare in situazioni alquanto comuni. Partiamo quindi analizzando degli esempi pratici.  Esempio 1: divisione…

Come impedire alle foto e ai video di WhatsApp di riempire la memoria del telefono

Secondo i dati del rapporto "Digital in 2020" di Hootsuite e We Are Social, gli italiani passano circa due ore al giorno sui social network e sui servizi di messaggistica. Considerando…

Hashmap con concatenamento: liste di trabocco

In questa breve serie di articoli andremo a vedere com'è possibile realizzare in C la struttura dati Hashmap. Nell'implementazione andremo ad usare le liste doppiamente concatenate come strutture dati ausiliarie. Andiamo…