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.
Por supuesto, la forma más simple de "sacudir" el fondo es usar un gif animado pero, no es lo mismo.
Para crear un efecto scroll del fondo sólo se necesita una imagen y un pequeño script.
body {background:#FFFFFF url(URL_imagen) repeat scroll 0 0;}
<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>
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.
34 comentarios:
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
Me quito el sombrero ante usted señor.
:P JMiur me encanta!!upaaa.. medio que marea un poco, habrá que tener mucho cuidado de la imagen, pero el efecto es hermoso.
Gracias!!
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!!!
Muy bueno el hecho de que funcione sin librerias, ¿es posible aplicarlo solo a una capa?
:) Gracias por la informacion; y para hacer eso mismo pero solo en un Gadget, como seria?
Besos!
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
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
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" :)
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
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 :)
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
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.
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.
ÑOOOSSSH!! Vaya expresión :D
Pués sí, usado con mesura puede ser agradable. Veremos que inventas y lo criticamos luego :D
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ú!
Cuando quiera algo, meneadito, esta es la opción justa :D
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 ;)
Ohhh qué bonito avatar :D
fantastic trick... yes sir I am a lonely blogger. The scrolling effect of background trick really marvelous.:D
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.
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.
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
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.
¡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.
Sí. Usala sin problemas.
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.
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.
Todo un reto, me atrae esto del javascript, aunque no tengo ni idea, pero lo lograré, iré poco a poco. Un "agarimoso" saludo.
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.
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.
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
pero me surgio una duda como podria hacer esto pero para que el movimiento sea de forma horizontal?
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';
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
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 ...