Cómo implementar un background animado con MootoolsPixelco Tech

Con bibliotecas como jQuery y Mootools se pueden hacer animaciones que hasta hace unos años eran sólo posibles con tecnologías como Flash. Prueba de ello es el tutorial que publicó David Walsh en su blog y que permite de una forma muy sencilla, animar un background en una página web con Mootools.

Implementación

Implementar este tipo de animación es muy sencillo. Primero tenemos que enlazar los archivos Javascript en la sección HEAD del HTML de la página en donde vamos a mostrar la animación:

<script type="text/javascript" src="mootools-1.2.4.js"></script>

El código CSS para esta implementación es más que sencillo:

<style type="text/css">

#animate-area    { background:url(bg-clouds.png) 0 0 repeat-x; }

</style>

Por último el código Javascript que le da vida a la animación:

<script type="text/javascript">

window.addEvent('domready',function() {

//settings

var duration = 50000;

var length = 2000;

var count = 0;

var tweener = $('animate-area').set('tween',{ duration: duration, transition: 'linear' });

//showtime!

var run = function() {

tweener.tween('background-position','-' + (++count * length) + 'px 0px');

};

run();

run.periodical(duration);

});

</script>

</head>

<body>

<script type="text/javascript">

(function(){

var bsa = document.createElement('script');

bsa.type = 'text/javascript';

bsa.async = true;

bsa.src = '//s3.buysellads.com/ac/bsa.js';

(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);

})();

</script>

Muy sencillo ¿no?