Z-Graphics: Un header particular: nubes animadas #1

Un header particular: nubes animadas #1

By Unknown On 7:38

Demo	Este particular efecto convierte la cabecera de nuestro blog/pagina web en un atractivo más. Acabo de implementarlo en Z-Graphics y he sabido de algunos visitantes que se ponen a jugar con las nubes :) (aunque en esta parte del tutorial solo explicaré cómo poner la animación).

La libreria que vamos a utilizar para agregar movimiento se llama $fx y es de libre descarga. Lo primero que debemos hacer es bajarla a nuestro computador y subirla a cualquier servidor; una vez hecho esto se le debe añadir a la plantilla:

Buscamos (Ctrl+f) la etiqueta: </head> y justo antes pegamos el siguiente código Javascript:

<script type="text/javascript">
  var ani = {
 var_nube1: {
  type: 'left',
  from: 5,
  to:  screen.availWidth,
  step: 1,
  delay: 50
 },
 var_nube2: {
  type: 'left',
  from: 0,
  to:  screen.availWidth,
  step: 1,
  delay: 100,
  onstart: function(){
   this.style.display = 'block';
  }
 },
 var_nube3: {
  type: 'left',
  from: 600,
  to:  screen.availWidth,
  step: 1,
  delay: 100,
  onstart: function(){
   this.style.display = 'block';
  }
 },
 };

 function startAnimation(){
  $fx('#nube1').fxAdd(ani.var_nube1).fxRun(null,-1);
   $fx('#nube2').fxAdd(ani.var_nube2).fxRun(null,-1);
    $fx('#nube3').fxAdd(ani.var_nube3).fxRun(null,-1);
 }

</script>

Lo que acabamos de hacer es crear las cada una de las variables necesarias para cada nube, es decir definir el tipo de movimiento (de izquierda a derecha: left), desde donde debe iniciarse la animación, hasta donde deberá ir la animación: screen.availWidth que se refiere al ancho de la ventana, y la velocidad con la que se moverá la nube.
Seguido de este código debemos pegar también los estilos:

<style type="text/css">
#nube1{
 position:absolute; 
 top:5%; 
 left:5%; 
 width:125px; 
 height:67px; 
 filter:alpha(opacity=5); 
 -moz-opacity:.5; 
 opacity:.5
 }
#nube2{
 position:absolute; 
 top:10%;

        left:15%; 
 width:125px; 
 height:67px; 
 filter:alpha(opacity=7); 
 -moz-opacity:.7; 
 opacity:.7
 }
#nube3{
 position:absolute; 
 top:20%; 
 right:5%; 
 width:125px; 
 height:67px; 
 filter:alpha(opacity=7); 
 -moz-opacity:.7; 
 opacity:.7
 }
</style>

Para cada capa (#nube1, #nube2 y #nube3) se define un ancho (width), un alto (height) y una posición: top y left. si la animacion fuera de derecha a izquierda la posición no estaría dada por left sino por right. los atributos filter:alpha(opacity=7); -moz-opacity:.7; opacity:.7 se refieren a la opacidad de la capa, se definen tres porque no todos los navegadores usan el mismo.

La animación aparecerá donde ubiquemos las nubes, en este caso deberá ser en la cabecera del blog, pero como las hemos definido con posición absoluta podemos ponerlas justo debajo del <body>:

Una última cosa: para que la animación funcione debemos llamarla, los metodos los podemos encontrar en la documentación de la libreria pero para no entrar en complicaciones la llamaremos desde el body sustituyendo <body> por <body onload="startAnimation();">

Demo	Download .rar

6 comentarios

OPin Dijo...

Muy interesante Miguel. Es verdad que resulta llamativo el efecto, lo ví en tu diseño de Template. Ahora mi pregunta es: qué pasa si quiero que no sean nubes ?. Que tal globos, pájaros o simplemente publicidad ? Es posible ?

Posted on 12/12/2009 9:32 p. m.

Master-Design Dijo...

Esta muy bueno el efecto Miguel gracias por compartirlo, te queria preguntar como hacer para poder poner las nueves que se puedan mover como uno quiera.

Posted on 12/12/2009 10:43 p. m.

Unknown Dijo...

Hola Opin, si miras bien el codigo html te darás cuenta que lo que se mueve es en realidad una capa (es decir 3: nube1, nube2 y nube3) y dentro de ella hay una imagen, ahi podrías poner un banner o un globo como dices.

La verdad es confusa la pregunta Master-Design, es como si me preguntaras la direccion de un lugar sin yo saber donde queda o a donde vas. Puedes leerte la documentación de esta libreria y mirar todos los metodos que utilizan para dar movimiento, aunque hay también otro tipo de animaciones.

Posted on 12/13/2009 6:21 p. m.

Master-Design Dijo...

Miguel lo que quería decir en cuanto al movimiento es como ponerlo igual como tu lo tienes en tu pagina, que los visitantes puedan jugar con las nubes y moverlas a su antojo a eso me refería

Posted on 12/14/2009 12:42 p. m.