Ago/093
Animando una página HTML con 10 simples líneas de código jQuery
Con el otro tutorial de jQuery creo que me pasé un poco en cuanto a nivel. En este vamos a aprender a animar una simple página web hecha con HTML y CSS. He comprobado que es compatible con Firefox, IE y Safari. Muy recomendado para iniciarse con jQuery!
Autor: Jack Bach
Bach es el autor principal de este blog. A los 15 años le dio por hacer un juego en flash y eso le llevó a hacer una web para mostrarlo al mundo. Ahora ya han pasado unos años y ha aprendido sobre todo XHTML y CSS para maquetar sus diseños web.Objetivo
Animar la página 404 que hicimos hace poco en este blog. Lo que queremos que ocurra es lo siguiente:
- Que el cuadro de mensaje caiga desde arriba hasta su posición.
- Que el texto de “Página no encontrada” parpadee dos veces.
- Que las nubes del cielo se muevan lentamente.
HTML y CSS
Usaremos los que hicimos en el screencast con una pequeña modificación. Como queremos que las nubes se muevan vamos a tener que separarlas de la imagen de fondo del documento. Por lo tanto tendremos una imagen para el fondo (sin nubes) y otra con las nubes. Las nubes apareceran en un div después de la etiqueta <body>:
<div id="cielo"></div>
Y su estilo en la hoja css será:
#cielo {
width: 100%;
height: 300px;
margin-bottom: -300px;
background: transparent url('img/cielo.jpg') no-repeat center 0;
z-index: 10;
}
jQuery
Empezamos repasando la teoría:
Todo el código, que se ejecutará cuando se haya cargado el documento, irá dentro de estas líneas:
$(document).ready(function (){
// Aquí va todo el código
});
Para dar estilo a un div con css (se modificará el que se le haya dado en la hoja de estilo), se utiliza el código como el siguiente:
$('#id').css({
// Nuevos valores
});
Y para animarlo de una manera personalizada se sigue el siguiente esquema:
$('#id').animate({ Valores finales }, “velocidad”, callback);
Para animar el fondo, por ejemplo, usaremos un código así:
$('#cielo').css({ backgroundPosition: '-1500px 0'})
.animate({backgroundPosition: '1300px 0'},100000);
Primero hemos definido el estilo inicial, en el que el fondo de #cielo está desplazado 1500px hacia la izquierda, y luego hemos dicho que en 100 segundos (100000ms) queremos que el fondo pase a estar 1300px hacia la derecha. Si os fijáis, en el animate se ha suprimido $(‘#cielo’), ya que ya estábamos trabajando con el.
Para el cuadro de mensaje hacemos más de lo mismo. Primero definimos que queremos que tenga un margen superior negativo muy grande para que quede fuera de la pantalla. Luego lo animamos de tal manera que se coloca donde queremos:
$('#mensaje'&&'.imagen').css({ marginTop: '-700px'})
.animate({ marginTop: '75px',}, 1000, function(){});
Si queremos trabajar con más de un div ponemos && entre los dos. Así trabajamos con un grupo formado por los dos. La diferencia respecto al cielo es que vamos a encadenar diferentes animaciones. Para hacerlo se usa el callback, que es una función que se inicia cuando acaba la animación. En este caso la función no contiene nada.
Lo que haremos será hacer que cuando el cuadro esté en su sitio el texto de página no encontrada se desvanezca. Con jQuery esto es tan fácil como usar como esto:
$('.noencontrado').fadeOut('fast')
Encadenando unas cuantas veces fadeIn (aparecer) y fadeOut (desaparecer) junto con la caída del cuadro de mensaje tenemos lo siguiente:
//Condiciones iniciales
$('#mensaje'&&'.imagen').css({ marginTop: '-700px'})
//Animaci—n
.animate({ marginTop: '75px',}, 1000, function(){
$('.noencontrado').fadeOut('fast', function(){
$('.noencontrado').fadeIn('normal', function(){
$('.noencontrado').fadeOut('fast', function(){
$('.noencontrado').fadeIn('normal');
}); }); }); });
Ahora hacer que el código del cielo y este se ejecuten cuando el documento esté cargado. El código resultante son 10 simples líneas de código jQuery:
$(document).ready(function (){
// Animaci—n fondo
$('#cielo').css({ backgroundPosition: '-1500px 0'})
.animate({backgroundPosition: '1300px 0'},100000);
//Condiciones iniciales
$('#mensaje'&&'.imagen').css({ marginTop: '-700px'})
//Animaci—n
.animate({ marginTop: '75px',}, 1000, function(){
$('.noencontrado').fadeOut('fast', function(){
$('.noencontrado').fadeIn('normal', function(){
$('.noencontrado').fadeOut('fast', function(){
$('.noencontrado').fadeIn('normal');
}); }); }); }); });
Demo y Descarga
19:52 on Agosto 10th, 2009
Correctamente explicado, aunque lo veo poco accesible ;-)
20:20 on Agosto 12th, 2009
Gracias! Aunque no se a que te refieres con lo de accesible…
Hasta pronto!
0:21 on Agosto 15th, 2009
Haces unos tutoriales muy buenos!
Enhorabuena!