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.

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

Ti è piaciuto l'articolo? Se non vuoi rischiare di perderti i prossimi articoli tieniti aggiornato con i feed RSS o seguimi su twitter e facebook!

Se non sai cosa sono, guarda questo video Ora non sai come abbonarti? Guarda questo video

Inoltre potrai seguirmi su twitter, facebook o friendfeed!

Articoli simili che potrebbero interessarti

Javascript Vs Flash: The Winner Is..

Javascript! Ormai slideshow, menu e testi animati, e molto altro ancora si possono tranquillamente realizzare con javascript, con il vantaggio di...

Tutorial Javascript – Realizzare Una Textarea Dinamica

Oggi vediamo un semplice ed efficace tutorial su javascript, dove realizzeremo una textarea dinamica, le cui dimensioni si adatteranno al testo che...

Tutorial Javascript: Slideshow di Immagini Con SexyCycle

Come ogni lunedì appuntamento con i tutorial. Oggi vediamo in particolare come realizzare uno slideshow di immagini sfruttando la libreria...