Contenido

e24ScrollEvents, monitoriza el scroll con MooTools

17 jun

+ 1

Alfredo Artiles vuelve a regalarnos una nueva herramienta para MooTools que nos permite controlar el scroll que hacemos accionando un evento a medida que lo estamos haciendo, e24ScrollEvents.

e24ScrollEvents
(Ver Imagen)

Muy similar al desarrollado por David Walsh (ScrollSpy) que vimos hace unos días, pero enfocado para ser más fácil de usar y de implementar en nuestras aplicaciones. Para ello, usa un sistema basado en eventos asociados a elementos, de este modo los elementos podrán tener los eventos “visible” y “hidden” que serán lanzados a medida que vamos haciendo scroll y el elemento esté “visible” o “hidden” (oculto).

Ejemplo

// Definimos el monitor del scroll
new e24ScrollEvents({
	container: window,
	mode: 'vertical',
	elements: ['el1', 'el2'] // Elementos relacionados al scroll.
});

// Eventos que serán accionados en el scroll
var el1 = $('el1');
el1.addEvents({
	'visible': function() {
		el1.setStyle('border', '4px solid #000');
	},
	'hidden': function() {
		el1.setStyle('border', 'none');
	}
});

// Eventos que serán accionados en el scroll
var el2 = $('el2');
el2.addEvents({
	'visible': function() {
		el2.setStyle('border', '4px solid #000');
	},
	'hidden': function() {
		el2.setStyle('border', 'none');
	}
});

Demo y Descargar

Puedes echarle un vistazo a las dos demos que Alfredo nos ha dejado y descargar código directamente desde su página.

  • Esto de la carga posterior de imagenes cuando se mueve la barra de scroll lleva haciéndolo Youtube algo más de un año con las imagenes en miniatura de los videos relacionados que aparecen en el cuadro de la derecha de cada vídeo.

    Está muy bien para optimizar.

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.