L’altra settimana per Halloween ho modificato una mia immagine per farla sembrare quella di uno zombie e nei giorni seguenti ho pensato che volevo mostrare le due immagini prima e dopo e per farlo ho cercato in rete per vedere se c’era qualcosa di già craeto, per risparmiare tempo e sovrapporre le 2 foto.
Ho trovato un plugin molto semplice che si chiama appunto beforeafter.
che permette di avere un effetto come questo:
before after plugin
la sua implementazione è davvero semplice.

Nella sezione HEAD, dovete implementare il plugin


successivamente dovete creare il vostro layout della pagina:


	
before

	
after


assicurandovi che le immagini abbiano la stessa identica posizione e dimensione.

infine non dimenticate di richiamare la funzione corretta con le seguenti righe:

$(function(){
			$('#before_after').beforeAfter({
			animateIntro: true,
			introDelay : 1000,
			introPosition : .25,
			introDuration: 2000,
			showFullLinks:false
		});
	});

Demo & Download

cosa ne pensate?
voi conoscete altri plugin che fanno questo? segnalatemeli, Grazie!

[ratings]

Pubblicato da Francesco

Sistemista con la passione per il Web Design e per la tecnologia, sempre al passo con i tempi, cerco le soluzioni a svariati problemi che riguardano i pc, server o web in generale. Cerco di essere sempre aggiornato, creo siti e cerco ispirazioni per migliorare sempre più le loro grafiche.

Lascia un commento