Parallax Scrolling: 16 Esempi E Tutorial

by admin admin 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 admin admin Date: 09-04-2020 jquery risorse tutorial tips parallax design javascript visite : 11049  
 
 
 
 

Articoli correlati