JMiur [E]

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'>
//<![CDATA[
var laPosicionVertical = 0;
function scrollFondo(maximo) {
laPosicionVertical = laPosicionVertical + 1;
if (laPosicionVertical > maximo) {
laPosicionVertical = 0;
}
document.body.style.backgroundPosition = '0 ' + laPosicionVertical + 'px';
}
window.onload= function(){
var scrollTimer = window.setInterval('scrollFondo(500)', 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.

35 comentarios:

Elizabetha Souvre  

OHHHHHHH...maravilloso...ya le encontrare algún uso a esta monada, en algún futuro blog ...nunc paro ;)..siempre con mas y mas ideas ;)

Me pregunto si es peligroso tener tantas ideas...:O :o :O :o

Bye y graciasssssssss

LIZ

Responder
jProgr  

Me quito el sombrero ante usted señor.

Responder
LuzdeLuna  

:P JMiur me encanta!!upaaa.. medio que marea un poco, habrá que tener mucho cuidado de la imagen, pero el efecto es hermoso.
Gracias!!

Responder
Graciela  

jajaja por favor deja de pensar, curioso :)
En el primer demo: parece un cabarulo -se puede decir eso aquí???-
el segundo es decoroso jajaja.
Mira a la amante de los fondos, si hubiera descubierto esto antes, creo que entran al blog una sola vez, luego salen borrachos jajaja, fondo por aquí fondo por allá.
Genial la idea!!!...todavía estoy tratando de entender lo de los fondos, juro que no aplico esto aún...besitos!!!

Responder
ΜigueŁ jίмenez™  

Muy bueno el hecho de que funcione sin librerias, ¿es posible aplicarlo solo a una capa?

Responder
Sharon  

:) Gracias por la informacion; y para hacer eso mismo pero solo en un Gadget, como seria?

Besos!

Responder
Gem@  

jajajaja me parto de risa y te imaginas por qué :D
El primer ejemplo uffff es segundo sensacional, con un script coser y cantar :D

Responder
Vku  

realmente muy bueno aunque no lo utilizaria.
ya conocia el efecto con jquery.
hasta en un momento lo modifique para que funcionace con prototype pero no sabia que se podia hacer sin librerias.
muy bueno lo tuyo
gracias y un saludo

Responder
le_o  

Buen fondo para una funeraria :D Está muy bueno, felicitaciones. La gente sigue queriendo cosas que se bamboleen, que se muevan, que tengan brillo, un carnaval carioca! "Está muy quieto, le faltan cosas" :)

Responder
JMiur  

Lo peligroso no es tener ideas. Lo peligroso es llevarlas a cabo :D

Pués, la verdad, yo tampoco lo usaría, me marea :D

Miguel, Sharon: Sí, es posible, bastaría ponerle un ID al DIV y cambiar el script. Algo así:
document.getElementById('NOMBRE').style.backgroundPosition

Graciela, Gem@: ¿Les gusta el primer ejemplo? ¿Cabarute? Bueno ... (no traduzco, lo dejo librado a la imaginación) :D

¿Será que vuelve la interente con brillitos y ventanas que se sacuden? :D

Responder
Graciela  

me recordó el concurso navideño, mi madre cúanto brillo y movimiento, cuando ingreso a alguna página por íconos y veo 'navideños' cierro inmediatamente, creo he quedado medio -no medio- totalmente aterrada jajaja...bueno tienes que mostrar todo, que no me guste no significa que a muchos si.
No expliques lo de -caba- cualquier información dirigirse a RAC real academia cordobesa :)

Responder
Marcos Gabriel  

Esta é uma opção bem leve se comparada a script que usam jquery , porem eu acho que uma vez que ja uso jquery na minha pagina não vejo mal ja puchar mais uma função com ele rs. claro para alguem que não use esta é concerteza a melhor opção , simples e leve . :D

Responder
JMiur  

Graciela: Me sacas un peso de encima. Ya saben, cualquier aclaración, dirigirse a la RAC real academia cordobesa :D

Esa es la idea Marcos, que sea liviana y funcione en cualquier lado sin restricciones.

Responder
BanakaBanaka!!  

Uno pasa unos días sin poder entrar a Internet y cuando lo hace se encuentra cosas como esta. JMiur, para cosas así, en mi tierra canaria hay una palabra o expresión que resume perfectamente la impresión que se lleva uno al leer, ver, probar y utilizar cosas como este script tan sencillo... Viene a ser:

ÑOOOSSSH!!

(ya que hablamos de "palabros"... eso sí, esto no aparece en la RAC ni en la RAE).
Sencillísimo, práctico y además funciona... Yo tampoco lo utilizaría en exceso por eso del mareo, pero creo que podría quedar muy bien si se utiliza con mesura y buen tiento, en alguna etiqueta concreta como le explicas a Miguel y a Sharon.De hecho... se me ocurre una manera curiosa de utilizarlo en la nueva versión que estamos preparando de la plantilla del blog de @TwittBoy, ya te contaré algo cuando lo ponga en práctica...
Muy bueno.
★Iván.

Responder
JMiur  

ÑOOOSSSH!! Vaya expresión :D

Pués sí, usado con mesura puede ser agradable. Veremos que inventas y lo criticamos luego :D

Responder
CaTa  

Ahh que volao' el segundo! :D , el primero es como mmmm... recargaditoitoito. En todo caso no es el tema, creo... sino mas bien es increible la cantidad de opciones para los blogs que uno encuentra siempre acá.. Salú!

Responder
JMiur  

Cuando quiera algo, meneadito, esta es la opción justa :D

Responder
Graciela  

jajaja espero no busquen a la RAC jajaja...hace tiempo no veíamos a Banaka :) esta gente disfruta de las playas, cocoteros :) :D
Mi amiga Coki hizo la plantilla y el perfil de mi pajarito!!!...ya no más la vaquita de San Antonio -pobrecita la guardo en algún lugar-
Tengo diseñadora, mira JM hasta donde ha llegado mi éxito y fama ;)

Responder
JMiur  

Ohhh qué bonito avatar :D

Responder
xXHaLLoWeeN13Xx  

excelente........... :) me sirvio al pelo..
de paso te deo la direccion de mi blog para que lo veas

http://depressive-and-doom.blogspot.com/

Responder
srikanta  

fantastic trick... yes sir I am a lonely blogger. The scrolling effect of background trick really marvelous.:D

Responder
MaCaPe  

Este script me viene como "anillo al dedo" para un pequeño montaje, pero estoy de "no", hice pruebas y más prubas y nada, utilizo "Nvu" ¿Faltará llamar al script antes de "body"? Un cordial saludo.

Responder
JMiur  

El script se ejecuta al cargare la página; por eso dice:
window.onload= function(){.......}

Tendría que ver el ejemplo para buscar el error.

Responder
MaCaPe  

Siento seguir incordiando, pero abusando de tu amabilidad subí la prueba con la imagen que tu tienes de muestra,no encuentro el error.
http://dl.dropbox.com/u/7213890/probascroll/probascroll.html
Saludos

Responder
JMiur  

No sé cómoDropBox interpreta ciertos caracteres así que lo mejor es que uses CDATA. Ahí lo cambién en el post para que puedas copiar y pegar. Eso, es universal así que debería funcionar tanto en Blogger como en cualquier otro sitio.

Responder
MaCaPe  

¡Eres genial¡Muchas gracias.¿Puedo utilizae esa imagen? Ando un poco mal de tiempo, nuestro centro quiere participar en un concurso y el plazo está a finalizar,...Un cordial saludo.

Responder
JMiur  

Sí. Usala sin problemas.

Responder
MaCaPe  

Disculpa de nuevo, ¿Es posible cambiarle la direccionalidad con una pequeña modificación en el código? Espero no resultar tan pesada en otras ocasiones.

Responder
JMiur  

Es posible pero tendrás que probar. Para empezar, deberías cambiar:
laPosicionVertical = laPosicionVertical + 1;
por
laPosicionVertical = laPosicionVertical - 1;
pero puede requerir más cambios.

Responder
MaCaPe  

Todo un reto, me atrae esto del javascript, aunque no tengo ni idea, pero lo lograré, iré poco a poco. Un "agarimoso" saludo.

Responder
Daiana  

Hola JMiur. Me encanta este truco. Lo he probado con Jquery pero hace mucho retardo a la página. ¿Habría alguna posibilidad de hacer que el movimiento que realiza la imagen sea horizontal?. Gracias.

Responder
JMiur  

Como puse en un comentario anterior, es probable que si pero no lo he intentado.

Sin duda es lento y de ninguna manera es algo recomendable para utilizar.

Responder
lalo89  

muy bueno me ayudo mucho una duda he visto que es posible poner varios fondos a cosas como capas o celdas pero es posible poner varias iamgenes de fondo al body? intente hacerlo poniendo todo el contenido del body en una capa y aplicar el efecto lo malo es que dejo unos borde en los cuatro lados supongo que el body no cubre toda la pantalla y si crece se perderia lo que busco, en mi caso deseo poner una imagen de 124 de altura en lo alto 560 abajo de esa ( tambien podria unirlas y dejarlas como una solo esta dos) y lo demas de otro color lo que quiero es hacer un fondo tipo cielo que la parte alta sera la pate oscuras y lo de enmedio las nubes lo demas sera el resto y claro todas se deben repetir en horizontal por eso pregunto se pueden poner varias imagenes de fondo al body?:S

Responder
lalo89  

pero me surgio una duda como podria hacer esto pero para que el movimiento sea de forma horizontal?

Responder
JMiur  

Se pueden usar múltiples fondos con CSS3 pero n oen IE8. Ver entrada. Tambien pueden agregarse superponendo DIVs.

Para camboar el sentido debe cambairse el script; empezando por esto:
document.body.style.backgroundPosition = '0 ' + laPosicionVertical + 'px';
y definiendo laPosicionHorizontal
document.body.style.backgroundPosition =laPosicionHorizontal + 'px' + ' 0';

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR