Fw

Wordpress Creative Developer

Tutorial Javascript: Prima e Dopo..

  • Tutorial Jquery
  • -

A volte ci può essere l’esigenza di mostrare l’evoluzione di un ritocco fotografico, di una donna con e senza trucco, e più in generale di far vedere l’inizio e la fine del lavoro, un po’ come in questo esempio preso dal New York Times, realizzato però in flash.

Grazie al plugin Before/After, implementato da Catch My Frame, vedremo quanto è semplice ottenere un effetto come quello che hai visto nell’esempio, utilizzando la libreria Jquery.

Bell’effetto vero? Vediamo quali sono i passi per ottenerlo. Alla fine dell’articolo troverai i sorgenti dell’esempio che hai appena visto.

Passo Preliminare.

Scarica i file necessari dalla pagina dell’autore del plugin

Passo 1

Tra i tag head inserisci queste righe di codice, necessarie per inizializzare lo script.




Lo script agirà su un div #container, che vediamo come deve essere scritto nel passo successivo.

 

Passo 2

Tra i tag body, dovrai inserire le righe di codice necessare per creare un div #container, con all’interno altri 2 div contenenti le 2 immagini che si vogliono visualizzare.

before
after

Passo 3 (opzionale)

Si può personalizzare lo script, modificando le righe di codice al passo 1, attraverso questi quattro parametri:

  • animateIntro – crea un’animazione che porta la barra da destra verso il centro della foto (default  false)
  • introDelay – se animateIntro è impostato su true, permette di impostare quanti millisecondi bisogna aspettare prima che la barra vada al centro della foto (default  1000)
  • introDuration – se animateIntro è impostato su true, permette di impostare quanti millisecondi devono passare nel spostamento della barra da destro verso il centro (default 1000)
  • showFullLinks – permette di visualizzare i link per visualizzare l’immagine prima o dopo la modifica (default true)

Ecco un esempio di codice con tutti i parametri attivi.

$('#container').beforeAfter({
	animateIntro : true,
        introDelay : 2000,
        introDuration : 500,
        showFullLinks : false
});

Finito. Semplice vero?

Guarda altri esempi

Scarica l’esempio

6 commenti

  1. Non so se posso linkare… ma ci tenevo a farti vedere il mio personale risultato dell’effetto After Before: http://www.eliany.it/colorize_01.html nella stessa pagina troverai anche l’effetto Fade da te proposto :) Grazie mille!

  2. Ciao Eliany si hai fatto benissimo!! brava, sono felice di vedere che i miei tutorial ti stanno tornando utili ;)

  3. Ciao! Volevo farti i complimenti per il sito!
    Ho un problema! Sei cosi gentile da spigare velocemente come ottenere questo effetto sul mio sito? Non so neanche dove mettere le foto!
    Grazie in anticipo!

  4. Ciao Albert e benvenuto nel blog ;)

    E’ tutto spiegato nel tutorial e puoi anche scaricare i sorgenti. Se non riesci contattami per e mail e vediamo di trovare una soluzione ;)

  5. Salve!
    Sto provando a fare funzionare questo plugin, ma ho una domanda… dopo che scarico i file, cosa devo fare con questi file??
    questo plugin funziona solo con wordpress.org?
    Grazie

  6. Ciao Monica e benvenuta nel blog ;)

    E’ spiegato tutto nel tutorial. Cosa non hai capito esattamente? Hai provato a scaricare il sorgente per vedere come è stato realizzato?

Scrivi un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *