Conmemorando que se acerca día de muertos, celebrado en México los días 1 y 2 de Noviembre y Hallowen celebrado en Estados Unidos (y por copia en todo el mundo) el 31 de Octubre, les dejo este pequeño regalo, es un código en jQuery que podrán ver en ejecución en este blog pasando 5 segundos. Funciona con la mayoría de los navegadores Web modernos (IE 8 y 9, Google Chrome 5+, Safari 3+, Opera 9+) y es necesario Flash sólo para los efectos de sonido.
El código es el siguiente y lo explico a continuación:
Css
<style>
#bigGhost{
position:absolute;
display: none;
left: 10px;
}
.ghost{
position:absolute;
display:none;
}
</style>
Javascript
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script language="javascript">
$(document).ready(function(){
function prepareGhosts(){
var width = $(document).width()-130;
var height = $(document).height()-130;
$(".ghost").each(function(){
var x = Math.floor(Math.random()*width);
var y = Math.floor(Math.random()*height);
$(this).offset({ top: y, left: x });
});
$(".ghost").each(function(){
var time = Math.floor(Math.random()*(3000-(500-1))) + 500;
$(this).fadeIn(time);
});
$(".ghost").each(function(){
var time = Math.floor(Math.random()*(3000-(2000-1))) + 2000;
$(this).animate({opacity: 0.00, top: '-=1000' }, time);
$(this).animate({opacity: 1, top: '+=1000' }, time);
$(this).animate({opacity: 0.00, left: '-=1000' }, time);
});
}
function createGhost(){
for(var i = 0; i < 30; i++){
$('#container').append("<img class='ghost' src='images/ghost.png' />");
}
}
function startanimation(){
$("#jpId").jPlayer( {
ready: function () {
this.element.jPlayer("setFile", "files/soundtrack.mp3").jPlayer("play");
},
swfPath: "js"
});
createGhost();
prepareGhosts();
setTimeout(function(){ bigger(); }, 10000);
}
function bigger(){
$('#bigGhost').fadeIn('fast');
$("#bigGhost").animate({"left": "+=400px"}, 2000, function() {
$('#bigGhost').fadeOut('fast');
});
}
setTimeout(function(){ startanimation(); }, 5000);
});
</script>
<div id="bigGhost"><img src="images/bigGhost.png" /></div> <div id="container"> </div> <div id="jpId"></div>
El código realmente no es tan complicado como parece, sólo las líneas 71, 72 y 73 contienen html, el resto es creado en tiempo de ejecución. Veamos entonces:
Empezamos creando un temporizador que ejecutará toda nuestra animación en 5000 milisegundos (5 segundos), noten que tiene una función incrustada, esto porque se está ejecutando dentro del $(document).ready, el cuál pone a ejecución todo nuestro código cuando la pág. haya cargado todos los elementos, para evitar comportamiento no deseado.
setTimeout(function(){ startanimation(); }, 5000);
function startanimation(){
$("#jpId").jPlayer( {
ready: function () {
this.element.jPlayer("setFile", "files/soundtrack.mp3").jPlayer("play");
},
swfPath: "js"
});
createGhost();
prepareGhosts();
setTimeout(function(){ bigger(); }, 10000);
}
startanimation() instancia la librería jPlayer, que uso sólo para reproducir el sonido, no tiene nada que ver con la animación y pueden obviarlo si lo desean, las líneas 43 y 44 ejecutan las funciones que señalan, la última línea crea otro temporizador para el último efecto que se ejecuta al final de nuestra animación.
Con jQuery podemos agregar elementos al DOM en tiempo de ejecución, esto es lo que hacemos en las líneas 30 a 34:
function createGhost(){
for(var i = 0; i < 30; i++){
$('#container').append("<img class='ghost' src='images/ghost.png' />");
}
}
Con el método append() agregamos HTML al div container declarado en la línea 72.
function prepareGhosts(){
var width = $(document).width()-130;
var height = $(document).height()-130;
$(".ghost").each(function(){
var x = Math.floor(Math.random()*width);
var y = Math.floor(Math.random()*height);
$(this).offset({ top: y, left: x });
});
$(".ghost").each(function(){
var time = Math.floor(Math.random()*(3000-(500-1))) + 500;
$(this).fadeIn(time);
});
$(".ghost").each(function(){
var time = Math.floor(Math.random()*(3000-(2000-1))) + 2000;
$(this).animate({opacity: 0.00, top: '-=1000' }, time);
$(this).animate({opacity: 1, top: '+=1000' }, time);
$(this).animate({opacity: 0.00, left: '-=1000' }, time);
});
}
Primero obtenemos el tamaño de la pantalla y las asignamos a las variables width y height (18 , 19) posteriormente usadas para al “azar” usando un método Random, ubicar a cada una de nuestras imágenes en partes de la pantalla sin salirse de ese límite (24). Las imágenes salen por default ocultas por CSS, las hacemos aparecer (29) después de haberle asignado posiciones, fadeIn() funciona para mostrar un elemento en pantalla con un efecto suave.
En las líneas 34,35 y 36 definimos un método de animación que hace la mayor parte del trabajo, animate() ejecuta bajo un tiempo definido la acción que le pasemos, como mover un elemento o cualquier atributo CSS de una manera suave. jQuery encola las animaciones por orden descendente, o de manera directa, podemos agregar tantos efectos queramos.
Por último, usando un poco de los métodos descritos hacemos aparecer como parte final otro elemento en la pantalla:
function bigger(){
$('#bigGhost').fadeIn('fast');
$("#bigGhost").animate({"left": "+=400px"}, 2000, function() {
$('#bigGhost').fadeOut('fast');
});
}
Resalto las líneas 61 y 62 para mostrar cómo encolar un método de manera directa, fadeOut() es la contra parte de fadeIn() y desvanece un elemento de la pantalla.
Como podrán darse cuenta la animación es lograda y no es tan complicado de implementar. Para usarlo en tu blog o sitio sólo debes de subir y especificar las rutas correctas a las librerías jQuery y jPlayer (sólo si deseas sonido). No hay más código detrás, las imágenes pueden ser las que tú desees: Fantasmas, esqueletos, naves de StarWars, Pokemon, iPhones, tan Geek como tu corazón mande.
Sólo recuerda enlazar a este blog , puedes usarlo a tu antojo.
Actualización: Se ha eliminado el demo online en este blog de este código.
