Ir arriba

Un bonito efecto para tu pagina web, burbujas que flotan hasta desaparecer en el marco superior. Puedes cambiar la imágen por otra si quieres, la que está por defecto es esta:

Qué editar: La direccion de la imágen la puedes cambiar por la que quieras, la direccion de esta burbuja, es http://img525.imageshack.us/img525/633/bubblewin2av4.png

Numero de burbujas que aparecerán:
var no= 15;

Para agregar nuevas imágenes, solo tienes que insertar una nueva línea y aumentar el número que hay entre los corchetes []

snow[0] = "http://..."
snow[1] = "http://..."
snow[2] = "http://..."
snow[3] = "http://..."
snow[4] = "http://..."
snow[5] = "http://..."

[Código Actualizado] El siguiente codigo lo debes pegar antes de </body>

<script language="JavaScript1.2">
<!-- Begin

var no = 15; // cantidad de imágenes
var speed = 2; // Velocidad de desplazamiento de las imágenes
var snow = new Array();
snow[0] = "http://img525.imageshack.us/img525/633/bubblewin2av4.png"
snow[1] = "http://img525.imageshack.us/img525/633/bubblewin2av4.png"
snow[2] = "http://img525.imageshack.us/img525/633/bubblewin2av4.png"

var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 1800;

if (ns4up||ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
j = 0;

for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");
} } else if (ie4up||ns6up) { if (i == 0)
{
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");
}
}
if (j == (snow.length-1)) { j = 0; } else { j += 1; }
}

function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] -= sty[i]; if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight; }
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i]+pageYOffset;
document.layers["dot"+i].left = xp[i] +
am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}

function snowIE_NS6() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] -= sty[i];
if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = ns6up?window.innerWidth-5:document.body.clientWidth;
doc_height = ns6up?window.innerHeight-5:document.body.clientHeight;
}
dx[i] += stx[i];
if (ie4up){
document.all["dot"+i].style.pixelTop = yp[i]+document.body.scrollTop;
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
else if (ns6up){
document.getElementById("dot"+i).style.top=yp[i]+pageYOffset;
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
}
}
setTimeout("snowIE_NS6()", speed);
}

if (ns4up) {
snowNS();
} else if (ie4up||ns6up) {
snowIE_NS6();
}
// End -->
</script>

21 comentarios:

Anónimo dijo...

hola mi nombre es manuel y me intereso el tema de la burbujas. he intentado probarlo pero no me funciono.
copio todo esl scrip (esta todo como comentado tengo que sacarle todos los comentarios??). capaz tengo el error en donde hay
qué editar: Donde dice: bubble.gif pones la direccion de la imágen que quieras, para la burbuja, es http://img525.imageshack.us/img525/633/bubblewin2av4.png. esto lo tengo q poner como dice aca o puedo poner el nombre del archivo de la imagen de la burbuja??
mi correo es manalesan@htmail.com
cualquie cosa agregame al msn y hablamos.
saludos

Ignacio dijo...

en bubble.gif va la direccion de la imagen, si quieres la misma imagen pones esa direccion.
En todo caso te responderè al mail ^^

Anónimo dijo...

ok si me escribes al correo mejor. ya prove de todos modos y no pasa nada.
1- cuando copio el codigo en dreamweaver entre el body me aparece todo en gris como si estaria todo comentado. eso queda asi.
2- cambie bubble.gif por la direccion de la imagen y tampoco funciono.
espero tu respuesta te paso el correo nuevamente o agregame al msn.
manalesan@hotmail.com

Ignacio dijo...

El codigo estaba funcionando mal por cosas de blogger, ahora esta perfecto, es cosa de copiar y pegar
saludos!

Alejandro dijo...

Hola, soy Alejandro y lo he puesto en mi blog, pero he visto que solo funciona con Internet Explorer, en cambio, con Firefox y Safari no funcionan. ¿Habría alguna solución a esto?

Ignacio dijo...

Debe ser problema de blogger porque a mi me funciona perfectamente en IE, firefox, Opera y Flock.

. dijo...

hola ¿se puede hacer que sean copos de nieve y caigan para abajo?
gracias

Anónimo dijo...

kantepushe, para que nieve en tu blog quizá te interese mirar AQUÍ

. dijo...

Muchísimas gracias.

Anónimo dijo...

hola a todos amigos esta es una noticia de ultima hora pronto llegara a la internet uno de los blog mejor actualizado del año donde podran ver mucha informacion sobre ayudas para blogger y otros blog, este blog esta muy bien organizado con muchas imagenes fotos entre otras cosas muy pronto hara su aparicion mundial en toda la internet todos podran entrar y ver tan grande avance muchas gracias y que esten bien ok....

Ignacio dijo...

:O!

Anónimo dijo...

Hola, hay alguna manera de que se vean las burbujas pasar sobre un .swf , las veo pasar por detras, gracias

Williams dijo...

ooo, muchisimas gracias

Anónimo dijo...

mmmm
este no me funciono lo pege en mi pag web y no paso nada.
y tengo el internet explorer

Anónimo dijo...

no sucede nada, creo que hay algo malo en el codigo o quizas el lugar donde se debe pegar esta mal indicado...

Ignacio dijo...

El código esta bien, tal vez el problema sea su tipo de página, como blogger, wordpress, etc
Ya que en esos Cms no se pone normalmente.

Anónimo dijo...

no se me ven las burbujas , sale la x d la imagen flotando.

Anónimo dijo...

huau este efecto de las burbujas me latio mas que los otros que e visto en esta misma pagina me latio esta chido

miss_miley68 dijo...

muuchiisimas gracias nose si te importara que haya puesto un tuto en mi blog!! para que todo el mundo sepa!!! cosas!!!

martin dijo...

que tal? para que les funcione deben quitar esto de la parte superior de su html:

martin dijo...

no salio lo que queria poner, me referia a esto:
DOCTYPE html PUBLIC hasta... aca:/DTD/xhtml1-transitional.dtd

Publicar un comentario

Gracias por visitar Creando Web, si tienes alguna duda, solo pregunta! ^^
- He activado la moderación de comentarios por el spam :)