Script para ampliar la funcionalidad de desvanecer cualquier tipo de elemento HTML

abril 4, 2010 | | 0 comentarios | Html Posteado por javier

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.

PLAIN TEXT JavaScript: <script language=“JavaScript” src=“JSFX_ElemFader.js” type=“text/javascript”></script>

Ejecutaremos la acción mediante el evento “onload“.

PLAIN TEXT HTML: <body onload=”JSFX.fadeElemAuto()”> 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.
PLAIN TEXT
CSS:

1
2
3
4
5
6
7
8

 
#menu { height:100px;}
#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);  }</div>

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.
PLAIN TEXT
HTML:

1
2
3
4
5
6
7

<div  id=”menu”>
<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></div>


Aplicado a los botones de nuestro formulario
También lo haremos utilizando la clase elemFader
Aplicado a enlaces con css
PLAIN TEXT
CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.elemFaderCeleste
{
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;</div>
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”
PLAIN TEXT
HTML:

1
2
3
4
5

<div  style=”width: 80px”>
<a class=”elemFaderCeleste”  href=”#”>Home</a>
<a class=”elemFaderCeleste”  href=”#”>Contacto</a>
<a class=”elemFaderCeleste”  href=”#”>About</a>
</div>

Mas Info javascript-fx
PLAIN TEXT
HTML:

1
2
3
4
5
6

<form>
<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>

Etiquetado como:

Escribe un comentario

You must be logged in to post a comment.