Cabecera animada para el Blog mediante jQuery

En este tutorial veremos cómo animar los elementos de una cabecera al momento de cargar el blog, para ello utilizaremos jQuery y un poco de CSS para hacer los efectos que queramos.



Para comprobar el resultado del efecto puedes visitar este enlace.



Primero que todo, necesitaremos conocer los ID's o classes de los elementos que deseemos animar, yo utilizaré los valores genéricos pero estos pueden variar según la plantilla:

• #header img: Corresponde al logo del blog.
• #header h1: Si no tienes texto en lugar de una imagen, posiblemente el ID sea este.

Recuerda que puedes animar cualquier objeto, si tienes un buscador o unos banners no habrá problema siempre y cuando conozcas el selector, ID o class.

Paso 1: Creando el script:

Como cualquier otro javascript es necesario crearlo dentro de una etiqueta </script>:

<script type="text/javascript">
</script>

Ahora bien, lo primero que haremos será utilizar el evento "$(document).ready()", el cual se encargará de ejecutar el script al momento de cargar el blog:

<script type="text/javascript">

$(document).ready(function (){

/*Acá añadiremos nuestros selectores */

});

</script>

Listo, ya tenemos la base del script, ahora falta incluir los selectores que deseemos animar, para no complicarlos demasiado no me centraré en explicarlo y les mostraré el selector con el atributo .animate:

$('#el-selector').css({ marginTop: '-100px'})
.animate({ marginTop: '0px',}, 1500, function(){});

• El texto #el-selector corresponde al  ID, class o selector que deseemos animar.
• El marginTop: '-100px' es el márgen superior que tomará el selector al primer momento, está en negativo para que no se muestre en el blog y sobrepase el documento.
• El valor marginTop:'0px' corresponde al valor en el que terminará la animación.
• El valor 1500 corresponde a la cantidad de milisegundos que demorará la animación en finalizar.

Veamos un ejemplo en el que animaré tanto el menú de mi blog como el logo:

<script type="text/javascript">
$(document).ready(function (){

$('#header img').css({ marginTop: '-100px'})
.animate({ marginTop: '0px',}, 1500, function(){});

$('#barratop').css({ marginTop: '-100px'})
.animate({ marginTop: '0px',}, 800, function(){});

});
</script>

Como se puede apreciar, utilicé los selectores #header img y #barratop, en el primero la animación demora 1,5 segundos, mientras que en el segundo selector la animación tarda 0.8 segundos.

Ahora que ya tenemos listo nuestra animación podemos pegar el código antes de </head>.



Recuerda que jQuery es un script que demora la carga del blog, por lo que la animación no empezará inmediatamente.

Para que la animación sea suave debemos establecer el selector al márgen superior original, veamos un ejemplo con mis selectores:

#header img, #barratop {
margin-top:-100px;
}

Este código deberá ir antes de ]]></b:skin>.

• Si omitimos este paso la animación empezará abruptamente ya que jQuery dará el márgen superior recién haya cargado el blog.

Extra: Efecto de aparición suave en los elementos:

Puedes optar por otro efecto mediante "fadeIn", el cual permite que cada elemento se muestre mediante una aparición suave y bastante llamativa.

Para esto es necesario usar el valor "display:none" en los elementos que deseemos aplicar el efecto, y la síntaxis para cada elemento será la siguiente:

$('#ID').fadeIn(700);

En donde deberás reemplazar ID por el elemento al que deseemos aplicarle el efecto.

Entonces, el efecto quedaría así (Continuando con mi menú y el logo):

<script type="text/javascript">
$(document).ready(function () {
$('#header img').fadeIn(700);
$('#barratop').fadeIn(700);
});
</script>

El CSS de esta forma sería el siguiente:

#header img {display:none;}
#barratop {display:none}

Eso es todo, si no entiendes algo del tutorial puedes dejar la URL de tu blog y con gusto solucionaré los problemas o aclararé dudas.