Un simple scroll del background

Esto no es mi culpa sino de la curiosidad: ¿Es posible hacer que la imagen de fondo de una página web se mueva con un scroll sin usar librerías?

Pués, la verdad, sí. Digamos que es una técnica del tiempo en que las cosas que había en internet debían "moverse" todo el tiempo y nos fascinaba que así fuera aunque, por suerte ya se ha abandonado el bamboleo risa

Por supuesto, la forma más simple de "sacudir" el fondo es usar un gif animado pero, no es lo mismo (ver DEMO).

Para crear un efecto scroll del fondo sólo se necesita una imagen y un pequeño script.


Colocamos la imagen a utilizar en la definición CSS del body:
body {background:#FFFFFF url(URL_imagen) repeat scroll 0 0;}
Y luego, el script antes de </head>:
<script type='text/javascript'>
var laPosicionVertical = 0;
function scrollFondo(maximo) {
laPosicionVertical = laPosicionVertical + 1;
if (laPosicionVertical &gt; maximo) {
laPosicionVertical = 0;
}
document.body.style.backgroundPosition = &#39;0 &#39; + laPosicionVertical + &#39;px&#39;;
}
window.onload= function(){
var scrollTimer = window.setInterval(&#39;scrollFondo(500)&#39;, 64);
}
</script>
En el llamado a la función puden cambiarse dos datos:

500 es la altura máxima, generalmente, es similar a la altura de la imagen a usar
64 es la velocidad, un número menor hará un scroll más rápido y un número mayor un scroll más lento

El resultado de esto es lo que puede verse en este otro DEMO.

0 comentarios:

Publicar un comentario