Elem Fader es un script que amplía la funcionalidad para desvanecer cualquier tipo de elemento HTML. Dando un efecto bastante agradable al realizar los mouseover sobre cada uno de ellos. Es muy simple de aplicarlo a listas, botones de formularios, inclusive adaptarlo a nuestro Menú con Imágenes.
Ver demos - Descarga demo
Uso.
Lo primero será descargar el script (usar botón derecho y guardar “enlace como”). Lo alojaremos en nuestra carpeta o servidor. Posteriormente llamaremos a esa librería incluyendo el siguiente código entre las etiquetas < Head > …..< /Head > de nuestra Web.
Ejecutaremos la acción mediante el evento "onload".
Podemos observar que en la etiqueta < body > tenemos el evento onload=" JSFX.fadeElemAuto()" Es decir, que cuando se han terminado de cargar todos los elementos de la página se llamará a una función llamada "JSFX.fadeElemAuto()" que hemos definido en el script.
Aplicado a un menu con imagenes
Creamos nuestro menú como habitualmente lo hacemos con su correspondiente CSS.
#menu ul { list-style:none; margin:0; padding:0 10px;margin:0 0 0 100px; }
#menu li { float:left; }
#menu li a { display:block; height:40px; width:113px; background-position:center top; cursor:pointer }
#menu li#home a { background-image:url(home.gif); }
#menu li#about a{ background-image:url(about.gif); }
#menu li#links a { background-image:url(links.gif); }
Y en nuestra estructura, agregaremos una nueva clase denominada elemFader, la cual nos generara el efecto desvanecido al realizarse el Mouseover entre cada uno de los enlaces.
<ul>
<li id="home"><a class="elemFader" href="#"></a></li>
<li id="about"><a class="elemFader" href="#"></a></li>
<li id="links"><a class="elemFader" href="#"></a></li>
</ul>
</div>
Aplicado a los botones de nuestro formulario
También lo haremos utilizando la clase elemFader
<input value="Aceptar" class="elemFader" type="button">
<input value="cancelar" class="elemFader" type="button">
<input value="enviar" class="elemFader" type="button">
<input value="borrar" class="elemFader" type="button">
</form>
Aplicado a enlaces con css
{
position:relative;filter:alpha(opacity=20); -moz-opacity:0.2;
display: block;
border-top : 1px solid #77CFFB;
border-left : 1px solid #77CFFB;
border-right : 1px solid #7BD0FB;
border-bottom : 1px solid #7BD0FB;
background-color:#7FD4FF;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size:12px;
text-decoration:none;
color: #FFFFFF;
width:100%;
text-align:left;
}
La estructura, llamando en cada enlace a la clase "elemFaderCeleste"
<a class="elemFaderCeleste" href="#">Home</a>
<a class="elemFaderCeleste" href="#">Contacto</a>
<a class="elemFaderCeleste" href="#">About</a>
</div>
Mas Info javascript-fx
Loading ...
Matias
08-01-2008
Permalink
Excelente Script. Lo malo es que este no funciona en Google Chrome. Alguien saber porque?