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"));
7 comentarios, 1 referencias
+
#