aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

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.

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