Librerias como Prototype y script.aculo.us son muy potentes y nos permiten implementar múltiples funcionalidades y efectos a nuestros sitios web. Lo que ocurre es que en ocasiones, pueden resultar demasiado pesadas cuando únicamente deseamos implementar un efecto en concreto. Aquí es donde entran en juego clases como Fadomatic, que nos permite implementar efectos de opacidad con facilidad. Es soportado por múltiples navegadores y nos permite permutar la opacidad de elementos.
La sintaxis de la función es la siguiente:
function Fadomatic (element, rate, initialOpacity, minOpacity, maxOpacity)
Donde:
element - Es el elemento con el que vamos a jugar
rate- La velocidad (de 0 a 100)
initialOpacity (opcional, predeterminado 100) - La opacidad de inicio del elemento (de 0 a 100)
minOpacity (opcional, predeterminado 0) - La opacidad minima del elemento (de 0 a 100)
maxOpacity (opcional, predeterminado 0) - La opacidad máxima del elemento (de 0 a 100)
Existen 6 métodos a utiliza con el objeto Fadomatic:
fadeOut() - Transición hacia transparente
fadeIn() - Transición hacia opaco
haltFade() - Detiene la transición en curso
resumeFade() - Reanuda la transición
en curso
show() - Establece la opacidad del elemento al valor máximo
hide() -Hace el elemento transparente.
Ejemplo de uso:
1.- Lo primero que tenemos que hacer es descargar el script Fadomatic desde su sitio web.
2.- Incluimos una llamada al script donde lo deseemos utilizar:
3.- Incluimos el siguiente CSS:
#caja_fadomatic {
width: 150px;
height:110px;
background-color:#990000;
padding:4px;
color:#FFFFFF;
font:10px Verdana, Arial, Helvetica, sans-serif
}
Y por último:
Caja