12 de agosto de 2009

ago
12
2009

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.



Más Post Relacionados:



No encontrastes lo que Buscabas ? GratisJuegos21

0 comentarios on "Un simple scroll del background"

Agrega tu Comentario sobre el funcionamiento del Juego
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Deja tu Mensaje:

No se Permiten enlaces en los nombres, los enlaces se escriben en los comentarios:
Puedes usar

<a href="URL">NOMBRE</a>

<b>NEGRITA</b>

 

Gratis juegos21 | Copyright © 2009 | Todos los Derechos Reservados