Micaela 18 de Agosto de 2008 a las 11.36
   Imprimir artículo
elWebmaster.com

Logo con efecto de animación con CSS


Desde el sitio Swedish Fika les traigo un tutorial para crear un encabezado al que, al pasar el mouse sobre él, le aparezca un fondo a través de un efecto de desvanecimiento. Para esto se usará XHTML básico, CSS y algo de Javascript no obstrusivo mediante JQuery. El efecto final puedes observarlo aquí.

La imagen que utilizan en el ejemplo puedes verla debajo de este p√°rrafo. Como ver√°s se encuentran tanto la imagen normal como la que aparecer√° con el efecto en un mismo archivo. De esta forma nos aseguramos de que cargue m√°s r√°pidamente.

Es importante que las partes repetidas en ambas imágenes coincidan totalmente ya que cualquier diferencia, aunque sea de sólo unos pocos pixeles se notará bastante.

El HTML que utilizaremos es muy simple, tan sólo la siguiente línea:

<h1 id="header"><a href="#">Awesome header</a></h1>

Luego debemos agregar el siguiente código CSS:

#header {
margin: 0;
padding: 0;
text-indent: -9999px;
width: 400px;
height: 225px;
position: relative;
margin-left: -1em;
background: url(header.jpg) no-repeat;
}

#header a {
position: absolute; // This allows us to have
top: 0; // the anchor on top of the header
left: 0;
width: 400px;
height: 225px;
display: block;
border: 0;
background: transparent;
overflow: hidden;
}

#header .fake-hover {
margin: 0;
padding: 0;
width: 400px;
height: 225px;
display: block;
position: absolute;
top: 0;
left: 0;
background: url(header.jpg) no-repeat 0 -240px;
}

De esto debemos ajustar las propiedades width con el ancho de nuestra imagen, height con su altura y en background debemos sustituir header.jpg por la ruta y el nombre del archivo.

Por √ļltimo nos queda incrustar el Javascript. Antes que nada debemos enlazar nuestra p√°gina a JQuery mediante el c√≥digo que dejo a continuaci√≥n:
<script type="text/javascript" src="jquery-1.2.3.min.js">
</script>

Si a√ļn no tienes esta librer√≠a puedes descargarla de su sitio oficial.

Luego de esto colocamos la siguiente función en el sector head del sitio:

&lt;script type="text/javascript">
//<![CDATA[

var Header = {
// Let's write in JSON to make it more modular
addFade : function(selector){
$("<span class=\"fake-hover\"></span>").css("display", "none").prependTo($(selector));
// Safari dislikes hide() for some reason
$(selector+" a").bind("mouseenter",function(){
$(selector+" .fake-hover").fadeIn("slow");
});

$(selector+" a").bind("mouseleave",function(){
$(selector+" .fake-hover").fadeOut("slow");
});

}
};

$(function(){
Header.addFade("#header");
});


//]]>
</script>

Con esto ya habremos terminado y tendremos nuestro header listo para usar.

Fuente: Swedish Fika


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (3)

  1. Sebas dice:

    Gracias, por tutorial bastante bueno ;) ojo con el segundo script, falta algo

    saludos
    sebas.insanefruits.net

  2. THSmok dice:

    Muy interesante….

    Gracias por compartirlo!!!!!!!!!!!!!!!

  3. √ďscar Moreno dice:

    Es posibe repetir este mismo efecto en la misma p√°gina??? Poder adaptarlos a unas cuantas im√°genes a modo de presentaci√≥n… Gracias

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesión