Como hacer fondos animados

He hecho un script en jQuery para poder animar los background de cualquier componente de la web. Me he inspirado en esta página aunque lo he rehecho desde 0 para darle más funcionalidad.

La idea es poder mover en cualquier dirección los fondos que se aplican desde CSS y hacer un efecto de scroll como en muchos videojuegos 2D.

¿Como hacerlo?
Bien, pongo un html de ejemplo con el que trabajaremos.


<body>
<div id="bg1"></div>
<div id="bg2"></div>
<div id="bg3"></div>
<body>

Bien simple. Son 3 div que queremos poner uno sobre otro y ponerles un fondo con transparencias. Yo usaré un png.

El CSS para ubicarlos puede ser este:


body {
  background: blue;
}
div#bg1, div#bg2, div#bg3 {
  position: absolute;
  width: 900px;
  height: 300px;
  background: url(img/clouds-1.png) 0 0;
}

La imagen clouds-1.pngque estoy usando es un png-24 de 3000px de ancho. Un fondo transparente sobre el que he dibujado algunas nubecitas. Lo importante es que nos debe quedar un rectangulo de 900×300 con alguna nube dentro sobre un fondo azul.

Y ahora viene el JQuery que le da la chispa de la vida:


(function($) {

  var timer = 0;

  $.defaultStep = 0;
  $.defaultSpeed = 1000;

  $.fn.initBgMovement = function(stepX, stepY,speed) {

    //Get default parameters if undefined
    if (stepX == undefined) stepX = $.defaultStep;
    if (stepY == undefined) stepY = $.defaultStep;
    if (speed == undefined) speed = $.defaultSpeed;

    var bgContainer = $(this);
    var position = bgContainer.css("backgroundPosition");
    var regexp = /(-d+|d+)px (-d+|d+)px/;

    var x = position.match(regexp)[1];
    var y = position.match(regexp)[2];

    timer = setInterval(function() {
      x -= stepX;
      y -= stepY;
      bgContainer.css("backgroundPosition", x + "px " + y +"px");
    },speed);
  }
})(jQuery);

Lo que hace es coger las coordenadas iniciales del fondo del componente que le invoca y modificarlas en intervalos de tiempo regulares.
Para llamarlas, usando jQuery, basta con usar alguno de estos ejemplos:


$('div#bg1').initBgMovement();
$('div#bg2').initBgMovement(1,-0.5,500);
$('div#bg3').initBgMovement(1,1);

Como se puede ver los parámetros son opcionales. En caso de no pasar ninguno coge los que hay especificados en la función jQuery.

El primer parametro es la distancia del paso en el eje X
El segundo param. es la distancia del paso en el eje Y
El tercero es el tiempo en milisegundos en que se debe dar cada paso.