Fw

Wordpress Creative Developer

Tutorial jQuery – Effetto Parallasse

  • Tutorial Jquery
  • -

Appuntamento con i tutorial  jQuery, dove oggi vediamo jParallax, un plugin che esiste già da qualche anno, ma del quale non si è mai parlato nel blog.

Per farti un’idea di cosa si tratta, ti invito subito  a vedere questo esempio.

Tutorial jQuery - Effetto Parallasse

Come vedi al movimento del mouse si muovono i diversi strati, che non sono altro che delle immagini posizionate una dopo l’altra.  Alla fine del tutorial troverai degli esempi di siti che sfruttano questo plugin.


Vediamo ora quali sono i passaggi per ottenere un effetto simile a quello visto nell’esempio.

Passo 1. Inizializzazione

Una volta scaricato lo script, tra i tag head, inserisci le seguenti righe di codice, per richiamare il framework jquery e jparallax.

 

Passo 2. Codice HTML

Bisogna inserire un primo div (o ul), per convenzione chiamato parallax, che conterrà poi tutti gli altri elementi (possono essere div, li,  immagini, testi) che saranno i diversi strati dell’animazione.
Il codice è riferito all’esempio mostrato in precedenza.

Passo 3. Codice CSS

Per quanto riguarda il CSS è importante assegnare al div #parallax la proprietà position:relative (oppure absolute) e le dimensioni. Inoltre bisognerà assegnare delle dimensioni prefissate agli elementi che fanno parte dell’animazione, che determineranno la velocità di scorrimento. Infatti più alto sarà il valore, più veloce sarà lo scorrimento. Nel nostro caso le dimensioni sono già state assegnate nel codice HTML.

Passo 4. Applicare jParallax

Infine bisogna applicare lo script al div parallax e il gioco è fatto.

jQuery(document).ready(function(){
	jQuery('#parallax').jparallax({});
});

Esistono numerose personalizzazioni che si possono effettuare, ma per queste ti lascio alla pagina di documentazione 😉

jParallax Inspiration

Vediamo qualche sito che sfrutta questa tecnica, per ispirarti per futuri progetti.

Esempio jParallax - Bingo campione

Esempio di jParallax - Beatles

Esempio jParallax - Dezignus

Se conosci altri esempi che fanno utilizzo di questa tecnica non esitare a citarli nei commenti 😉

23 Commenti

  1. bello il tutorial… ma mi da l’impressione che il movimento non sia tant sluido o sbaglio?

  2. *non sia tanto fluido

    scusate l’errore

  3. Bellissimo questo tutorial, quello nel sito dei beatles è spettacolare..

  4. […] This post was mentioned on Twitter by JQ magazine. JQ magazine said: RT @fedeweb: Tutorial jQuery – Effetto Parallasse: Appuntamento con i tutorial  jQuery, dove oggi vediamo jParallax,… http://bit.ly/gk1VIl […]

  5. @Alberto
    A me sembra fluido, quale esempio ti sembra “scattoso”?

    @Marco
    Ciao e benvenuto nel blog 😉
    Sono contento che il tutorial ti sia piaciuto. Già è davvero ben fatto. Ma come hai visto basta poco 😉

  6. Ciao, fantastico questo plugin!
    Per quanto riguarda il fatto che sia scattoso, bhè dipende dalle prestazioni del pc, le jquery usano parecchia CPU!…

  7. Ciao, bellissimo plug-in!
    Ne approfitto per farti i complimenti per il blog, mi spiace averlo trovato solo ora!! >__<
    Finalmente tutorial validi in italiano su jquery, sto cercando di prendere quella direzione ma la vedo dura 🙁

    ciao e ancora complimenti!
    elena.

  8. @Lorenzo
    Ciao e benvenuto nel blog 😉
    Ti ringrazio per l’osservazione, è vero dipende dalle prestazioni del pc, anche se il mio non è recentissimo e non scatta. Dipende anche se si sta facendo altre operazioni: se ho 200 tab aperte su Firefox scatta per forza!

    @Elena
    Ciao e benvenuta anche a te 😉
    Ti ringrazio tantissimo per i complimenti! Se ci sono dubbi non esitare a chiedere!

  9. […] strati, che non sono […]Scarica gratis il jQuery Mega Pack con tutti i miei tutorial jQuery! Vai alla Fonte dell’Articolo Nessun tag per questo […]

  10. Grazie mille per questa chicca 😀
    Mi servirà sicuramente nello sviluppo di un progetto di matematica.
    Complimenti per il blog 😉

  11. ciao,
    è molto bello questo effetto,
    solo che c’è qualcosa che mi sfugge, sto cercando di riprodurlo ma non riesco, ho usato questo codice nel tag head

    #parallax{
    width: 900px;
    height: 200px;
    position: absolute;
    left: 500px;
    top: 200px;

    }

    jQuery(document).ready(function(){
    jQuery(‘#parallax’).jparallax({});
    });

    e questo nel tag body

    cos’è che mi sfugge secondo voi??

  12. ah scusate non ci stava
    nel tag body ho messo questo:

  13. non si vede!!

    ok ho copiato prima i due link per gli script in alto,

    e poi ho fatto il div parallax con le immagini

  14. sono quasi riuscita solo che le immagini anziché andare un po’ di quà e un po’ di la si muovono tutte insieme nella stessa direzione

  15. mi si muovono tutte in blocco

  16. […] TweetCondividi Benvenuto! Se è la prima volta che vieni in questo blog, puoi abbonarti gratis ai feed RSS per restare sempre aggiornato sulle ultime news oppure puoi diventare mio fan!Mi sono innamorato d jParallax e degli effetti che puoi creare grazie a questo fantastico plugin jQuery. Te ne ho già parlato qualche mese fa proponendoti un breve tutorial. […]

  17. manufacturedessai.it/it/ strepitoso!!
    e nikebetterworld.com ancora meglio!!

  18. Ho bisogno di un gran favore qualcuno sa dirmi come fa il sito della nikebetterword a far si che i diversi movimenti tra le diverse pagine non vengono memorizzati sull’url del sito, cioè si colelgano a #/nomesezione ma non capisco come è il funzioanmeno qualcuno sa aiutarmi

  19. http://2create.bg/#
    …questo è bellissimo!!!

  20. Ciao
    sai dirmi con quale lightbox può essere compatibile questo effetto? Ho provato colorbox ma se attivo uno si disabilita parallax e viceversa.
    grazie e complimenti

  21. Ciao,
    che tu sappia, questo effetto lo posso applicare a temi wordpress? Seguendo la tua guida?
    grazie infinite in anticipo 🙂

Scrivi un commento

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