Corsi on-line

Immagini riflesse con jQuery e MooTools

In questo breve articolo presenterò uno script che potrà essere utilizzato come estensione per jQuery e MooTools al fine di ottenere immagini riflesse come nell’esempio seguente:

Il tutto sarà possibile con un semplice file, Reflection.js, che sulla base di un’immagine sorgente è in grado di creare un nuovo elemento “img” tramite filtri CSS; dopo aver scaricato il file, bisognerà richiamare la classe corrispondente nel codice HTML:

<img src="immagine.jpg" alt="Immagine" class="reflect" />

Fatto questo, sarà possibile utilizzare il file sia come estensione per jQuery:

document.ready(function() {
		var options = { opacity: 0.75 };
		$('.reflect').reflect(options);
	});

Che per MooTools:

window.addEvent('domready',function() {
	var options = { height: 0.5 };
	$$('img.reflect').each(function(img) {
		img.reflect(options);
	});
});
Post correlati
I più letti del mese
Tematiche