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
Acceder