Effetti Parallasse in jQuery per il tuo sito web: 10 esempi

Immagine avatar per Andrea Di Rocco

Pubblicato da Andrea Di Rocco in

1K+ Visite sul post corrente.

Effetti Parallasse in jQuery per il tuo sito web

Vuoi dare al tuo sito degli effetti parallasse in jQuery che colpiscano immediatamente l’attenzione dei tuoi visitatori?

L’effetto parallasse certamente rende lo “scrolling” del sito un’esperienza maggiormente coinvolgente per il visitatore.

In questo articolo ti proponiamo una serie di interessanti esempi di siti che ne fanno utilizzo e che potrebbero ispirare il design del tuo blog. Se vuoi trovare altri esempi, ti suggerisco di dare un’occhiata ad Awwwards, un sito che raccoglie e premia le migliori opere dell’arte del web design.

Questi sono i siti più interessanti che abbiamo trovato.

10 esempi di effetti parallasse in jQuery

1) Salvatore Casalino

sito web con effetti parallasse jQuery - Casalino

Il curriculum online interattivo di Salvatore Casalino è un esempio molto elaborato di parallasse e un modo di presentare la propria esperienza lavorativa in maniera estremamente originale. Segui il percorso del personaggio attraverso le sue competenze. Come vedi, lo sfondo scorre mentre il personaggio cammina e gli elementi presenti si muovono e si trasformano.

2) TazzaNera

TazzaNera sito con effetti parallasse jQuery

Il sito di TazzaNera presenta un effetto molto bello con dei chicchi di caffè che volano mentre scorri la pagina e cambi schermata. Anche questa rappresentazione grafica è realizzata grazie all’effetto parallasse in jQuery.

3) Belyi Ostrov

Belyi Ostrov sito web con parallasse

Effetto parallasse anche per il sito di Belyi Ostrov, un complesso residenziale a San Pietroburgo. Scorrendo in basso, l’effetto parallasse si sviluppa con lo slide in orizzontale. Interessante anche l’effetto grafico con cui è stato realizzato il menu, che mostra l’elenco spostando la schermata principale su un lato.

4) Violet Feredo

violet feredo

L’effetto parallasse jQuery realizzato per il sito Violet Feredo è caratterizzato da uno schema geometrico che dà l’effetto di una scomposizione e ricomposizione della nuova immagine. Effetti parallasse più semplici sono presenti anche nelle altre pagine del sito.

5) Iutopi

Iutopi esempio di sito con effetto parallax

Esplorare le profondità marine, insieme a servizi offerti da Iutopi, agenzia creativa che si occupa di sviluppo web.

Questo è l’escamotage visivo che colpisce immediatamente il visitatore e che gli permette di muoversi con facilità tra i vari “livelli” di profondità dell’informazione (e del mare…) attraverso il menu sempre presente alla sinistra dello schermo.

Un esempio davvero efficace di effetti parallasse in jQuery.

6) Anemoi Marine

anemoi marine

Trovo molto interessante l’uso degli effetti parallasse nel sito Anemoi Marine, poiché sono stati utilizzati per rappresentare il prodotto e il suo funzionamento. Con lo scroll nella pagina, vedrai infatti come queste installazioni vengono posizionate sulle navi e il meccanismo che permette di reclinarle.

7) SercoPointWeb

serco

Un esempio da parte di un’agenzia web e grafica. Qui gli effetti parallasse in jQuery sono stati utilizzati per rappresentare un movimento circolare e a spirale. Man mano che si scorre la pagina, infatti, i servizi offerti vengono rappresentati da una ruota che gira. Trovo interessante anche la scelta iniziale del tuo colore preferito, per poi visualizzare il sito nel colore da te scelto.

8) Discovery Lab

The Lab sito con utilizzo effetto parallasse

Discovery Lab è un sito che offre al visitatore una sorta di viaggio virtuale in un laboratorio che studia l’Alzheimer. In questo modo la fondazione leader in UK sulla ricerca contro la malattia vuole dare tutte le informazioni possibili riguardo a questa condizione, grazie a questa interfaccia dinamica e tridimensionale, correlata con pulsanti per approfondire ogni aspetto dell’argomento. Anche in questo caso le potenzialità degli effetti parallasse in jQuery sono stati magistralmente interpretati.

9) Every Last Drop

every last drop sito divulgativo con effetto parallasse

Esploriamo ora l’effetto parallasse del sito Every Last Drop, piattaforma focalizzata nel sensibilizzare l’opinione pubblica sullo spreco dell’acqua. Ogni passaggio di scrolling sulla home fa vedere quale sia lo spreco di acqua effettiva in ogni occasione comune della nostra vita.

10) IXL

ixl

IXL è un brand che si occupa di bevande energetiche per gli atleti. L’effetto parallasse utilizzato è simile a quello visto per Anemoi Marine, poiché il prodotto viene mostrato sotto diverse angolazioni. La bottiglia, infatti, ruota di 360° e ti permette di leggere anche l’etichetta.

Conclusione

In questo articolo hai visto in quanti modi puoi utilizzare gli effetti parallasse in jQuery per creare un design particolarmente accattivante e di sicuro impatto per i tuoi visitatori.

Utilizzi l’effetto parallasse sul tuo sito?

Cosa ne pensi di questi esempi?

Condividi con noi la tua esperienza lasciandoci un commento nel box qui sotto.

Guide correlate:

Tags:
Immagine di Andrea Di Rocco autore articoli SOS WP
Andrea Di Rocco Fondatore di SOS WP™
La mia passione per WordPress mi ha portato negli ultimi 10 anni a voler aiutare sempre più persone a creare blog e siti web in WordPress in completa autonomia. Spero che troverai utili le oltre 700 guide su WordPress e sulla SEO che ho pubblicato su questo blog. Se ne hai voglia ti invito a leggere la mia storia, cliccando sul pulsante qui sotto.
14Commenti
Lascia un commento
  1. Immagine avatar per mattia
    mattia

    ciao bellissimi esempi, ma per fare un cv sullo stile di casalino come ci si dovrebbe adoperare? c’è qualche guida da seguire?

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Mattia, quel cv è creato con tante personalizzazioni, quindi non sapremmo indicarti una guida specifica per ottenere un risultato simile. Dovresti studiare un po’ di Javascript o rivolgerti a uno sviluppatore. Se cerchi un modo originale per presentare il tuo curriculum, dai un’occhiata a questa guida.

  2. Immagine avatar per Nicola
    Nicola

    Il tema Avada permette l’uso di effetti di parallasse?

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Nicola, sì gli effetti parallasse sono inclusi nel tema Avada. Consulta la documentazione ufficiale per maggiori informazioni. Siamo a disposizione se hai altre domande!

  3. Immagine avatar per Nadia
    Nadia

    Ciao Andrea,
    Con il tema Divi è possibile creare effetti parallasse? Se sì, come? Bisogna comunque creare immagini a doc con Illustrator giusto?
    L’effetto che vorrei creare è simile a questo: https://gardenestudio.com.br/
    Grazie!
    Nadia

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Nadia, certo è possibile! Dai un’occhiata a questa guida: https://www.elegantthemes.com/blog/divi-resources/ultimate-guide-to-using-parallax-with-divi.

  4. Immagine avatar per roberto Ponzio
    roberto Ponzio

    ciao Andrea sempre e solo complimenti a te e al tuo staff SOS siete una risorsa importante per me . la mia domanda da neofita di WP è questa , ma se volessi utilizzare la grafica parallasse dovrei installare i classici temi wp oppure altro ? grazie

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Roberto, puoi ottenerla sia con temi ad hoc, sia aggiungendo la funzionalità grafica con un ottimo tema come https://wordpress.org/plugins/advanced-backgrounds/. Speriamo di esserti stati di aiuto!

  5. Immagine avatar per Riccardo
    Riccardo

    Ciao Andrea, mi chiedevo se gli effetti parallasse sono possibili anche in un bellissimo tema come Enfold.

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Riccardo, certamente.
      Dai una occhiata alle varie demo.

  6. Immagine avatar per Marcello Melica
    Marcello Melica

    Bellissimo articolo Andrea, come tutti quelli che ho letto fino ad ora sul tuo blog. Sono ottimi spunti anche se ahimè io devo ancora capire bene come funziona sta maledetta parallasse 🙁

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Marcello,
      grazie del tuo commento.
      Cosa non ti è chiaro dell’effetto parallasse?
      Un saluto!

  7. Immagine avatar per Silvia Cariello
    Silvia Cariello

    Grazie per aver raccolto questi esempi di siti con effetti in Parallax jQuery, sono interessanti e mi hanno dato uno spunto utile per un design di un sito a cui sto lavorando 😉

    1. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Silvia, grazie per il commento!
      Continua a seguirci 😉

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *