Contenido

Versión de Reflector para MooTools

21 sep

+ 8

Gracias a Reflector conseguimos reflejamos imagenes de forma dinámica mediante Javascript, pero la necesidad de usar prototype y script.aculo.us nos hizo tener que buscar métodos alternativos para conseguir el efecto espejo.

Ahora con esta versión para mooTools el tamaño no es un problema, con unas simples líneas de código puedes hacer el efecto sin necesidad de abusar de la tasa de transferencia de tu servidor.


/**
 * Reflection Class
 */
var Reflection = {
	/**
	 * options that can be used
	 */
	options: {
		/**
		 * amount of image to reflect
		 */
		amount: 1/3,
		/**
		 * startup opacity
		 */
		opacity: 1/2
	},
	
	/**
	 * Reflect a image
	 * @param {Object} element to reflect
	 * @param {Object} options for reflection
	 */
	reflect: function(element, options){
		this.options = Object.extend(this.options,options || {});
		element = $(element);
		var parent = element.parentNode;
		var next = element.nextSibling;
		var times = (element.height*this.options.amount);
		var dist = 1.0/times;
		for(i=0;i<times;i++){
			var h = new Element("div");
			h.setStyles({height:'1px',overflow:'hidden'});
			var img = element.clone();
			img.setStyle("marginTop",'-'+(element.height-i-1)+'px');
			img.injectInside(h);
				parent.insertBefore(h,next);
				h.setOpacity((1-dist*i)*this.options.opacity);
			}
		}
	};


Y la forma de usar tan simple como el resto.


Reflection.reflect($("IMAGEN"));

[Demo][Descargar]

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.