Corazones cayendo en el blog


Ya faltan pocos días para el 14 de febrero, así que hoy les traigo un tutorial que les servirá para colocar corazones que caen por su blog. Es muy sencillo de aplicar al blog, como ya se darán cuenta.

( Ver DEMO)


1.§ Vamos a Diseño - Elementos de la página - Añadir un gadget y elegimos HTML/Javascript.

2.§ Pegaremos el siguiente script:
<script type='text/javascript'>
var fallObjects=new Array();function newObject(url,height,width){fallObjects[fallObjects.length]=new Array(url,height,width);}

var numObjs=20, waft=50, fallSpeed=10, wind=0;
newObject("http://i42.tinypic.com/2a8jj40.gif",16,15);
newObject("http://i42.tinypic.com/2a8jj40.gif",16,15);

function winSize(){winWidth=(moz)?window.innerWidth-180:document.body.clientWidth-180;winHeight=(moz)?window.innerHeight+500:document.body.clientHeight+500;}
function winOfy(){winOffset=(moz)?window.pageYOffset:document.body.scrollTop;}
function fallObject(num,vari,nu){
objects[num]=new Array(parseInt(Math.random()*(winWidth-waft)),-30,(parseInt(Math.random()*waft))*((Math.random()>0.5)?1:-1),0.02+Math.random()/20,0,1+parseInt(Math.random()*fallSpeed),vari,fallObjects[vari][1],fallObjects[vari][2]);
if(nu==1){document.write('<img id="fO'+i+'" style="position:fixed;" src="'+fallObjects[vari][0]+'">'); }
}
function fall(){
for(i=0;i<numObjs;i++){
var fallingObject=document.getElementById('fO'+i);
if((objects[i][1]>(winHeight-(objects[i][5]+objects[i][7])))||(objects[i][0]>(winWidth-(objects[i][2]+objects[i][8])))){fallObject(i,objects[i][6],0);}
objects[i][0]+=wind;objects[i][1]+=objects[i][5];objects[i][4]+=objects[i][3];
with(fallingObject.style){ top=objects[i][1]+winOffset+'px';left=objects[i][0]+(objects[i][2]*Math.cos(objects[i][4]))+'px';}
}
setTimeout("fall()",31);
}
var objects=new Array(),winOffset=0,winHeight,winWidth,togvis,moz=(document.getElementById&&!document.all)?1:0;winSize();
for (i=0;i<numObjs;i++){fallObject(i,parseInt(Math.random()*fallObjects.length),1);}
fall();
</script>
Lo que está en negrita, es la URL del gif de corazón, que podemos reemplazar por otra imagen.

3.§ Finalmente, damos click en Guardar.

19 opinaron:

pachiarts

OHHHHHHHHH!!!!!...Gracias Jessica!!!!!...me encantó!!!!

Responder
Jéssica YK

» pachiarts:

Vi tu blog y quedó muy lindo!

S@lu2

Responder
David Ramirez

Genial, la usare en mi web k stoy x lanzar !!! Muchas Gracias

Jéssica YK

» David Ramirez:
Seguro tu sitio web se verá muy bien con este script. Gracias por tu comentario.

S@lu2

Responder
Livia Rangel

Me encanto :D

Jéssica YK

» Livia Rangel:
Muchas gracias (:

S@lu2

Responder
amores y labores

muchas gracias lo hice y ya estan cayendo muchos corazones en mi blog MUCHAS GRACIAS

Jéssica YK

» amores y labores:
Qué bueno que te gustó este tutorial. El efecto de los corazones cayendo es muy bonito (:

S@lu2

Responder
cristina angulo lara

Muchas gracias por ponerlo, me encanta :)

Jéssica YK

» cristina angulo lara:
Qué bueno que te guste este lindo efecto. Gracias por tu visita (:

S@lu2

Responder
Luisa Bustamante

Chicas hermoso el blog.Las felicito.

Jéssica YK

» Luisa Bustamante:
Gracias, me alegra mucho que te guste el blog. Por cierto, en este blog sólo escribe una persona (yo), quizás más adelante se una alguien más (:

S@lu2

Responder
Manuela Badaracco

Buenisiimoo, ya lo puse en mi blog y quedo hermoso! Gracias x tu tutorial genia.(:

Responder
Manuela Badaracco

Buenisiimoo, ya lo puse en mi blog y quedo hermoso! Gracias x tu tutorial genia.(:

Responder
Pablo Ramos

Muchas Gracias por el tip Lo puse en mi blog y creo que se ve bien Gracias nuevamente este es mi blog por si gustan visitarlo Saludos


http://tusdiscosaqui.blogspot.mx/

Jéssica YK

» Pablo Ramos:
Qué bueno que el tutorial te haya gustado. Y claro, acabo de visitar tu blog y ha quedado muy bien (:

Gracias por el comentario y la visita al blog.

S@lu2

Responder
todoloqueesmioesparati

Muchas gracias ya esta en mi blog a ver si lo pueden ver :v

Responder
todoloqueesmioesparati

Muchas gracias ya esta en mi blog a ver si lo pueden ver :v

Responder
Lizbeth Ramirez

muchas gracias y una pregunta sabes porque algunos gadget al ponerlos en HTML/JavaScript no aparecen, me refiero a efectos como este de los corazones cayendo...

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio