Crear una página 404 animado con jQuery

El siguiente manual que os voy a compartir nos servirá para crear una atractiva página 404 con animación, obtenido vía Tutorialzine.

Ya os he comentado en otras ocasiones que es el error 404 y como poder mostrarlo amigablemente modificando el archivo .htaccess o mediante código en .Net. Hoy lo que vamos ha intentar es ir un paso más e intentar que nuestros visitantes permanezcan más tiempo en nuestro sitio.

Sección HTML (OJO es HTML5)

En la sección del HEAD se ha incluido una condición por si el navegador utilizado es Internet Explorer y pueda entender fácilmente el código HTML5, con el resto de navegadores comunes esto no es necesario ya que tiene el soporte HTML5 integrado en el sistema.





Creating an Animated 404 Page | Tutorialzine Demo











Página no encontrada

No podemos encontrar lo que buscas.

En la página podemos ver el div #rocket y la etiqueta hgroup (nativa de HTML5). El div tiene como fondo la imagen rocket.png, y un número de estilos aplicados, incluyendo posicionamiento relativo necesario para la animación, como se verá en un momento.
Por último tenemos la librería jQuery y el archivos cript.js.
La página es bastante simple y sólo presenta la información básica para el usuario. Se podría mejorar mediante la inclusión de un mensaje más específico. Como muestra no está mal.

Sección CSS

Como ya hemos mencionado antes los importante de esta sección es dar posiciones relativas, así podremos moverlos.

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;
}

Otra de las partes más importes son las span steam que serán las encargas de que se muestre el humo del nuestro cohete. Cada una de ellas tiene un tamaño de 80px x 80px y la imagen steam.png que es el doble de grande que los spans. Como podéis ver existen dos versiones: una blanca (para dar la ilusión de humo) y otra en negro (para el humo del cohete).

Lo que haremos con jQuery es mover el humo en la dirección contraria a la de nuestro cohete.

El jQuery

Como ya comentamos anteriormente, parte de jQuery es crear la animación de los gases de escape. Echemos un vistazo más de cerca cómo se logra.

Usaremos como desencadenante del script el evento window load. Usaremos este evento, en contraposición del document ready, porque todos los elementos de la web se muestran a la vez y de esta forma evitamos ver la imagen del cohete antes que el humo que lo mueve.

$(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:

		$('',{
			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();
});

La función animSteam() es lo que crea el efecto del humo. Cuando se llama se ejecuta una animación que utiliza setTimeout para programar la misma función tras 10 milisegundos. Esto evita acumulaciones e iniciar una segunda animación antes de la primera se haya completado.

La secuencia de comandos elige al azar entre los steam1 y steam2. En el método animate() le decimos a jQuery que inicie una animación a partir de la posición actual del div. steam y mover el elemento de 58 píxeles a la izquierda y 100 píxeles hacía abajo.

La función de moveRocket() mueve lentamente el cohete a la izquierda y la derecha mediante la modificación de la propiedad CSS left.

VER DEMO

Deja un comentario