Attract the user’s attention using e24SpotLight for mootools
Introduction
e24SpotLight is a plug-in for Mootools that lets attract the user’s attention over a region. The effect simulates a lights off letting only the desired region illuminated.
Demos
Demo1: Selecting an object
Demo2: Selecting a region
Demo3: e24Presenter + e24SpotLight
Usage
Include Mootools 1.2.2 Core inside the HTML header. Remember that you can generate an optimum version of the mootools library selecting only the required components at Mootools Core Builder. The required components are DOMReady, Element.Dimensions, Fx.Transitions, Fx.Morph and all its dependencies. Also include e24SpotLight library:
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> |
Now write the necessary HTML code to init the spotlight. We need to pass an options object. We will see the rest of the options in detail below.
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 }); |
If we want to activate a DOM element given its Id or object reference then use this code:
1 | spotLight.lightOn('mydiv'); |
If we want to activate a region given its coordinates and dimensions then use this code:
1 | spotLight.lightOn({left: 100, top: 150, width: 300, height: 300}); |
Options
- transition: The effect transition name, like: ‘quad-out’, ‘bounce-in’, ‘elastic-in’, etc.
- duration: The duration in milliseconds of spotlight effect.
- zindex: The overlays layer’s z-index.
- bgcolor: The overlays layer’s color.
- opacity: The overlays layer’s opacity.
- margin: The ligth region desired margin.
- delay: The delay in milliseconds to hide the overlays layer. If the delay is zero the overlay layer never will be hidden, only will be hidden if you click the overlay.
Methods
- lightOn: Lights the region or DOM object. If we want to light a DOM object then we have to pass the element ID or the DOM object reference. If we want to illuminate a region then we have to pass the region coordinates and dimensions in this {left: 100, top: 150, width: 300, height: 300}.
- lightOff: Hides the overlay.
Known Issues
I can’t see nothing to improve for now, but i am open to hear your feedback.
License
Distributed under MIT License
Download
e24SpotLight 1.0 (27 KB, includes the demos)
If you want to check what I am working on now, then follow me at 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…