Contenido

Coverflow con MooTools

26 nov

+ 20

Hoy Dani, me pasa este enlace en el que podemos ver una versión de Coverflow desarrollada en MooTools. Además de su ligero peso me ha sorprendido la sensación de fluidez que he percibido desde Firefox (no he probado con otro Explorador).

Código

//Javascript
var CoverFlow = new Class({
	options: {
		container: 'CF',
		slider: {"slider":"slider","knob":"knob"},
		caption: 'captions',
		reflection: 0.5,
		startIndex: 0,
		useMouseWheel: true
	},
	initialize: function(options){
		this.setOptions(options)
		this.cur = 0;
		this.tar = 0;
		this.curI = 0;
		this.oW = $(this.options.container).offsetWidth;
		this.sz = this.oW * 0.5;
		this.init();
		this.checker = this.check.periodical(100, this);
	},
	check: function(){
		//console.log("this.tar:"+this.tar+"  this.cur:"+this.cur)
		switch (this.tar < this.cur-1 || this.tar > this.cur+1)
		{
			case true:
				this.moveTo(this.cur + (this.tar-this.cur)/3);
			default:
				//$clear(this.checker);
				break;
		}
	},
	init: function(){
		$$(this.options.images).each(function(image, i){
			image.setStyle("display","block");
			image.addEvent('click', this.glideTo.bind(this,[i]));
		}, this);
		
		this.sli = new Slider($(this.options.slider.slider), $(this.options.slider.knob),{
			steps: this.options.images.length-1,
		}).set(this.options.startIndex);
		this.sli.addEvent('onChange', this.glideTo.bind(this));
		
		if(this.options.useMouseWheel)
			document.addEvent('mousewheel', this.scoll.bind(this));
	
		$(this.options.container).setStyle("height", this.oW*0.33);
		$(this.options.container).setStyle("visibility","visible");
		this.moveTo(this.options.startIndex*-150);
		this.glideTo(this.options.startIndex);
	},
	scoll: function(e){
		var d = e.wheel;
		if(d > 0 && this.curI > 0)
			this.curI--;this.glideTo(this.curI);
		
		if(d < 0 && this.curI < this.options.images.length-1)
			this.curI++;this.glideTo(this.curI);
	},
	glideTo: function(i){
		$(this.options.caption).set('html', this.options.images[i].alt);
		this.curI = i;
		this.tar = i*-150;
		this.sli.set(i);
	},
	moveTo: function(x){
		x = Math.round(x);
		this.cur = x;
		var zI = this.options.images.length;
		$$(this.options.images).each(function(img){
			var z = Math.sqrt(10000 + x * x) + 100;
			var xs = x / z * this.sz + this.sz;
			var imgH = img.height;
			var imgW = img.width;
			var percent = 100;
			if ((imgW + 1) > (imgW / (this.options.reflection + 1))){
				percent = 115;
			}
			var newL = xs - (percent / 2) / z * this.sz;
			var newH = (imgH / imgW * percent) / z * this.sz;
			var newT = (this.oW * 0.33 - newH) + ((newH / (this.options.reflection + 1)) * this.options.reflection);
				
			img.setStyle("left", newL);
			img.setStyle("height", newH);
			img.setStyle("top", newT);
			img.setStyle("zIndex", x < 0 ? zI++ : zI--);		
			
			x += 150;
		}, this);
	}
});
CoverFlow.implement(new Options, new Events);

window.addEvent('load', function(){
	new CoverFlow({
		images: $$("#CF img"),
		caption: $('captions')
	});
});
//HTML
<div id="CF">
	<img class="cfImg" src="img/refl_img001.png" alt="First Image" />
	<img class="cfImg" src="img/refl_img002.png" alt="Second Image" />
	<img class="cfImg" src="img/refl_img003.png" alt="Image" />
	<img class="cfImg" src="img/refl_img001.png" alt="Image" />
	<img class="cfImg" src="img/refl_img002.png" alt="Image" />
	<img class="cfImg" src="img/refl_img003.png" alt="Image" />
	<img class="cfImg" src="img/refl_img001.png" alt="Image" />
	<img class="cfImg" src="img/refl_img002.png" alt="Image" />
	<img class="cfImg" src="img/refl_img003.png" alt="Image" />
	<img class="cfImg" src="img/refl_img001.png" alt="Image" />
	<img class="cfImg" src="img/refl_img002.png" alt="Image" />
	<img class="cfImg" src="img/refl_img003.png" alt="Image" />
</div>
 

Si alguien se anima, me gustaría verlo con imagenes reales.

[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.