Capta la atención de un objeto con e24SpotLight para mootools
Introducción
e24SpotLight es un plug-in para Mootools que permite captar la atención del usuario sobre una región. El efecto simula un apagado de luces dejando solo iluminada la región que deseamos destacar.
Demos
Demo1: Seleccionando un objeto
Demo2: Seleccionando una región
Demo3: e24Presenter + e24SpotLight
¿Cómo utilizarlo?
Incluye Mootools 1.2.2 Core dentro del header del código HTML de la página. Puedes generar una versión de la librería de tamaño óptimo desde el Mootools Core Builder, seleccionando DOMReady, Element.Dimensions, Fx.Transitions, Fx.Morph y todas sus dependencias. Y además incluye e24SpotLight después de ambos:
1 2 | <script src="js/mootools-1.2.2-core-nc.js" type="text/javascript"></script> <script src="js/e24spotlight-1.0.js" type="text/javascript"></script> |
Ahora veremos el código javascript necesario para inicializar el spotlight. Pasaremos como parámetro un objeto de opciones. Los parámetros los veremos en detalle más abajo.
1 2 3 4 5 6 7 8 9 | var spotLight = new e24SpotLight({ transition: 'quad:in', duration: 200, zindex: 5, bgcolor: '#000000', opacity: 0.7, margin: 8, delay: 2000 }); |
Si queremos activar un elemento del DOM dado su Id o su referencia
1 | spotLight.lightOn('mydiv'); |
O si queremos si queremos activar una región dadas sus coordenadas y dimensiones
1 | spotLight.lightOn({left: 100, top: 150, width: 300, height: 300}); |
Descripción de las opciones
- transition: El nombre de la transición que se utilizará, ej. ‘quad-out’, ‘bounce-in’, ‘elastic-in’, etc.
- duration: La duración en milisegundos del efecto de iluminación.
- zindex: El z-index de la capa overlay.
- bgcolor: El el color de la capa overlad.
- opacity: La opacidad de la capa overlay.
- margin: El margen a dejar por fuera de la región a iluminar.
- delay: El tiempo en milisegundos para que se oculte la capa overlay. Si se deja a cero entonces no se ocultará nunca, a no ser que se haga click sobre ella.
Métodos
- lightOn: Ilumina una región o un objeto. Si queremos que ilumine un objeto le pasamos como parámetro el Id o la referrencia. Si queremos que ilumine una región le pasamos las coordenadas y las dimensiones {left: 100, top: 150, width: 300, height: 300}.
- lightOff: Oculta la capa overlay.
Errores conocidos y cosas por hacer
No se me ocurre nada pero estaría encantado de escuchar vuestras opiniones.
Licencia
Distribuido bajo Licencia MIT
Descargar
e24SpotLight 1.0 (27 KB, incluye los demos)
Si quieres saber en qué trabajo ahora sígueme en twitter @aartiles24
Comentarios
[...] avisa de nuevo de un plugin para MooTools que ha desarrollado. Despues de e24BubbleFx nos presenta e24SpotLight, un plugin que nos permitirá captar la atención de nuestros usuarios mediante efectos de [...]
es realmente muy interesante !!
la verdad, muy lindo, claro y conciso
felicitaciones por el desarrollo, y gracias por compartir!
adeux
Pues, la verdad que esto fue una funcionalidad que necesitaba para e24Presenter y no busqué si existía algo ya, porque necesitaba garantizar yo ciertas posibilidades.
Pero e24Presenter se suele integrar con jquery también cuando la web del cliente ya trae dicho framework, por lo que no descarto que pronto lo tengamos también para jquery y prototype.
Capta la atención de un objeto con e24SpotLight para mootools…
e24SpotLight es un plug-in para Mootools que permite captar la atención del usuario sobre una región. El efecto simula un apagado de luces dejando solo iluminada la región que deseamos destacar….
e24SpotLight para Mootools: apaga la luz de tu web e ilumina el objeto deseado…
e24SpotLight es un plug-in para Mootools que permite centrar la atención del visitante en una región determinada. El efecto es como si apagara las luces en la web e iluminara el objeto deseado, similar a un teatro….
Información Bitacoras.com…
Valora en Bitacoras.com: Introducción e24SpotLight es un plug-in para Mootools que permite captar la atención del usuario sobre una región. El efecto simula un apagado de luces dejando solo iluminada la región que deseamos destacar. Demos Demo1: Se…