Crear página 404 con una animación mediante HTML 5, CSS y jQuery. Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Internet CSS

¡votar!

Crear página 404 con una animación mediante HTML 5, CSS y jQuery

Cuando en una aplicación web se pone alguna dirección que no existe aparece la página de error 404 página no encontrada. Como por todos es sabido, esta página de error se puede personalizar para hacerla más amigable.

Hoy vamos a ver como crear una página animada que salte cuando se produce este error. Para ello utilizaremos HTML, CSS y jQuery.

Como siempre, lo primero que haremos será crear el código html de la página que queremos desarrollar.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating an Animated 404 Page | Tutorialzine Demo</title>
<!-- Internet Explorer HTML5 enabling script: -->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="rocket"></div>
<hgroup>
<h1>Page Not Found</h1>
<h2>We couldn't find what you were looking for.</h2>
</hgroup>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

En el código que hemos puesto, hemos incluido el script para que si el navegador es Internet Explorer pueda reconecer las nuevas etiquetas HTML 5.

Después de añadir el script para IE, hemos añadido la hoja de estilos. Dentro del body, hemos indicado una sección con el ID “rocket” que será donde aparezca la imagen y una nueva etiqueta de HTML 5, hgroup, que representa el encabezado de una sección, agrupando varios elementos h1 – h6.

Por último lo que hacemos es la llamada a la librería jQuery, que será la que utilicemos para dar animación a la página.

A continuación, nos meteremos a ver los estilos de la página.

El contenedor con id rocket le daremos una posición relativa. Esto nos permite insertar los tramos con posición absoluta, que forman los gases de escape que salen del motor, y el desplazamiento con respecto al cohete.

body{
background:url('img/bg.png') no-repeat center center #1d1d1d;
color:#eee;
font-family:Corbel,Arial,Helvetica,sans-serif;
font-size:13px;
}
#rocket{
width:275px;
height:375px;
background:url('img/rocket.png') no-repeat;
margin:140px auto 50px;
position:relative;
}
/*      Two steam classes. */
.steam1,
.steam2{
position:absolute;
bottom:78px;
left:50px;
width:80px;
height:80px;
background:url('img/steam.png') no-repeat;
opacity:0.8;
}
.steam2{
/*   .steam2 shows the bottom part (dark version)
*       of the background image.
*/
background-position:left bottom;
}
hgroup{
/* Using the HTML4 hgroup element */
display:block;
margin:0 auto;
width:850px;
font-family:'Century Gothic',Calibri,'Myriad Pro',Arial,Helvetica,sans-serif;
text-align:center;
}
h1{
color:#76D7FB;
font-size:60px;
text-shadow:3px 3px 0 #3D606D;
white-space:nowrap;
}
h2{
color:#9FE3FC;
font-size:18px;
font-weight:normal;
padding:25px 0;
}

Las etiquetas span, que se añadirán de forma dinámica, tendrán 80 de ancho y de alto, le asignaremos una imagen de fondo, steam.png. Esta imagen es el doble de alto del tamaño que le hemos dado as span, y actualmente contiene dos versiones del vapor, blanco y negro. Luego las dos versiones que se crearán de span, steam1 y steam2 mostrarán las respectivas versiones de las imágenes.

Mediante jQuery creamos e insertamos las etiquetas span, como hemos indicado anteriormente, dentro del contenedro rocket, y movemos esto en la dirección opuesta del movimiento del rocket con el método de animación.

El script empieza añadiendo un evento a la carga de la ventana. Con esto nos aseguramos de que no se ponga en marcha la animación hasta que no se hayan cargado todos los elementos de la pantalla, incluido las imágenes.

$(window).load(function(){
// We are listening for the window load event instead of the regular document ready.
function animSteam(){
// Create a new span with the steam1, or steam2 class:
$('<span>',{
className:'steam'+Math.floor(Math.random()*2 + 1),
css:{
// Apply a random offset from 10px to the left to 10px to the right
marginLeft      : -10 + Math.floor(Math.random()*20)
}
}).appendTo('#rocket').animate({
left:'-=58',
bottom:'-=100'
}, 120,function(){
// When the animation completes, remove the span and
// set the function to be run again in 10 milliseconds
$(this).remove();
setTimeout(animSteam,10);
});
}
function moveRocket(){
$('#rocket').animate({'left':'+=100'},5000).delay(1000)
.animate({'left':'-=100'},5000,function(){
setTimeout(moveRocket,1000);
});
}
// Run the functions when the document and all images have been loaded.
moveRocket();
animSteam();
});

El método animSteam() es la que crea los efectos del motor. El script elige de forma aleatoria entre las clases steam 1 y steam 2 y el offsets del span horizontal con un valor aleatorio del margin-left. En el método animate(), más adelante, le decimos a jQuery que inicie una animación a partir de la posición actual del div de vapor (que es exactamente sobre la boquilla del cohete) y mueva el elemento 58 píxeles a la izquierda y 100 píxeles en el fondo.

Después de esto, nosotros le pasamos la duración de la animación, que será de 120 milisegundos.

La otra función de animación, moveRocket(), lo que hace es mover el cohete a la derecha e izquierda, modificando la propiedad left CSS.

Con esto ya estaría nuestra página de error. Pueden ver un ejemplo aquí.

Recordar que para que se muestre vuestra página de error creada, en el archivo .htaccess debéis de añadir la siguiente línea.