domingo, 15 de mayo de 2011

Corazones cayendo de tu cursor

Este truquito es similar al de brillito cayendo en tu cursor con la diferencia que ahora caen corazoncitooss !!!! =D ya me han preguntado bastantes sobre como hacerlo y bueno quiero compartirlos con ustedes ^^ es un efecto muy lindo!!!




NOTA MUY IMPORTANTE: Si tienes el codigo de brillitos eliminalo para que puedas poner el nuevo codigo de corazoncitos !!!!

okey para ponerlo en tu blog es muy facil te vas a Diseño >>> Elementos de pagina >>> Añadir un gadget htlm/javascript y pegar el codigo !!


Codigo corazoncitos:

<script type='text/javascript'>

// <![CDATA[

var colour=" #666666 ";

var sparkles=40;


var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var tiny=new Array();

var star=new Array();

var starv=new Array();

var starx=new Array();

var stary=new Array();

var tinyx=new Array();

var tinyy=new Array();

var tinyv=new Array();

window.onload=function() { if (document.getElementById) {

var i, rats, rlef, rdow;

for (var i=0; i<sparkles; i++) {

var rats=createDiv(3, 3);

rats.style.visibility="hidden";

document.body.appendChild(tiny[i]=rats);

starv[i]=0;

tinyv[i]=0;

var rats=createDiv(5, 5);

rats.style.backgroundColor="transparent";

rats.style.visibility="hidden";

var rlef=createDiv(5, 5);

var rdow=createDiv(5, 5);

rats.appendChild(rlef);

rats.appendChild(rdow);

rlef.style.top="2px";

rlef.style.left="0px";

rdow.style.top="0px";

rdow.style.left="2px";

document.body.appendChild(star[i]=rats);

}

set_width();

sparkle();

}}

function sparkle() {

var c;

if (x!=ox || y!=oy) {

ox=x;

oy=y;

for (c=0; c<sparkles; c++) if (!starv[c]) {

star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";

star[c].style.clip="rect(0px, 5px, 5px, 0px)";

star[c].style.visibility="visible";

starv[c]=50;

break;

}

}

for (c=0; c<sparkles; c++) {

if (starv[c]) update_star(c);

if (tinyv[c]) update_tiny(c);

}

setTimeout("sparkle()", 40);

}

function update_star(i) {

if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";

if (starv[i]) {

stary[i]+=1+Math.random()*3;

if (stary[i]<shigh+sdown) {

star[i].style.top=stary[i]+"px";

starx[i]+=(i%5-2)/5;

star[i].style.left=starx[i]+"px";

}

else {

star[i].style.visibility="hidden";

starv[i]=0;

return;

}

}

else {

tinyv[i]=50;

tiny[i].style.top=(tinyy[i]=stary[i])+"px";

tiny[i].style.left=(tinyx[i]=starx[i])+"px";

tiny[i].style.width="2px";

tiny[i].style.height="2px";

star[i].style.visibility="hidden";

tiny[i].style.visibility="visible"

}

}

function update_tiny(i) {

if (--tinyv[i]==25) {

tiny[i].style.width="1px";

tiny[i].style.height="1px";

}

if (tinyv[i]) {

tinyy[i]+=1+Math.random()*5;

if (tinyy[i]<shigh+sdown) {

tiny[i].style.top=tinyy[i]+"px";

tinyx[i]+=(i%5-2)/5;

tiny[i].style.left=tinyx[i]+"px";

}

else {

tiny[i].style.visibility="hidden";

tinyv[i]=0;

return;

}

}

else tiny[i].style.visibility="hidden";

}

document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sdown;

x=(e)?e.pageX:event.x+sleft;

}

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

}

window.onresize=set_width;

function set_width() {

if (typeof(self.innerWidth)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

}

function createDiv(height, width) {

var div=document.createElement("div");

div.style.position="absolute";

div.style.height=height+"49px";

div.style.width=width+"50px";

div.style.overflow="hidden";

div.style.backgroundColor=colour;

return (div);

}

// ]]>
</script>

En var colour="#666666"; modifica el color de los destellos puedes ponerle el que mas te guste o quede con el estilo de tu blog n__n

Lo miraste aqui en annyz kawaii blog n.n

29 comentarios:

  1. Hooola ;D

    Probe el codigo pero no me sale ningun destello D: Uso google chrome y crei que era por eso pero probe en firefox y tampoco me funcionaba :/ crei que fue porque le cambie el color de los detellos pero le deje el que tu pusistes y tampoco -.-"
    Sabes por que es? si es asi me explicas please? >.<

    Muy lindo el blog ;D siempre veo que hay de nuevo y me encantan *-*♥
    Besos♥

    ResponderEliminar
  2. que raro lo acabo de probar ahora mismo y si me salio bien el codigo o.O !! amm tenias anteriormente el codigo de brillitos?

    ResponderEliminar
  3. waaaaaaaaaaaaaaa gracias ya se lo puse a mi blog *-* se ven divino los corazoncitos <3

    ResponderEliminar
  4. genial lo pondré me encanta!
    y se ve muy lindo tu blog ya actualizado es tan kawaii ^^

    ResponderEliminar
  5. que buena onda n_n oye donde encuentras estos codigos? >.<

    ResponderEliminar
  6. No no, no le puse ningun codigo de brillitos ._.

    ResponderEliminar
  7. recuerda ponerlo en un gadget htlm script oki !!!

    ResponderEliminar
  8. Annyz...
    Hola! ¡Muy bien!
    Sé que me encantó tu blog, muy bonito!
    Recientemente he creado un blog también, llamado Reino Kawaii donde voy a publicar cosas lindas, me pregunto si me pueden publicar este tutorial en mi blog, dando crédito a usted.
    También quiero pedirle que me haga una visita. Yo sería muy feliz!
    besos...Robertinhaa ;3
    http://reinokawaii.blogspot.com

    ResponderEliminar
  9. como se le cambia el color a los corazones , eske me salen grises ¬_¬
    www.anaywill.blogspot.com
    gracias !!!

    ResponderEliminar
  10. haha ana mira en donde dice ar colour=" #666666 "; le cambias el color a tus corazoncitos cambia el codigo por otro

    ResponderEliminar
  11. Hola roberta

    claro puedes tomar la entrada y poner creditos !! besos

    ResponderEliminar
  12. ¡Gracias! Es usted muy amable!
    Besos, Roberta...
    http://reinokawaii.blogspot.com

    ResponderEliminar
  13. puse el efecto pero al final del blog me queda un espacio enorme en blanco, por que pasa eso ?:S

    ResponderEliminar
  14. neniii no sabria decirte T.T es raro eso q me mencionas sera porque pusiste el gadget abajo?? por fi sigueme contando para ver si te puedo ayudar

    besos

    ResponderEliminar
  15. olle como hago para poder que los corazones tengan otro color que no sea gris es que no se como ponerlo,gracias :)

    ResponderEliminar
  16. muchachita como lo pongo de muchos colores como el tuyo?:)

    ResponderEliminar
  17. hola anonimo si mira en tutoriales esta la entrada la de corazoncitos y la de brillitos multicolor y ahi mismo explico como y donde ponerlos :P!!

    ResponderEliminar
  18. mee gusta jeje gracias ^^
    te sigo
    sigueme =)

    ResponderEliminar
  19. hola mitsune solo copia el codigo y pegalo en un gadget y listo ^^

    ResponderEliminar
  20. pq no te sale el color?? solo cambia el codigo por otro ^^

    ResponderEliminar
  21. @annyz
    Holaaa... soy mas nueva en esto jejejee... no entiendo siquiera como debo dejarte un comentario :S
    he seguido tus pasos. mi cursor funcionaba y dejo de hacerlo.. intente restablecer el html del blog pero no me lo permite, intente volver a escribir el codigo para el cursor y nada... _talvez tu puedas ayudarme? te dejo mi msn: yami_87_2005@hotmail.com
    gracias por crear tu blog, es realmente util!

    ResponderEliminar
  22. hola SIMPLEMENTE TE AMO: nena no entiendo primeramente donde pusiste el codigo del cursor? en un gadget ? o donde.. porque la unica manera que no te funcione es que hayas eliminado el gadget.. de otra manera no sabria el porque no funciona.. estare pendiente de tu respuesta .

    ResponderEliminar
  23. Hay no puedo ponerlo, nose porq segui paso a paso, te dejo mi msn aver si me podes ayudar o mi face.. aiileen.-@hotmail.es fc: Ailu Horst http://www.facebook.com/ailu.bj si podes atudarme por el face mejor porq el msn no lo uso casi...

    ResponderEliminar
  24. lo puse todo, pero se me quedan los corazoncitos pero despues de un dia se me van, por que ?

    ResponderEliminar
  25. hola FLORCHA:

    no sabria decirte porque te pasa eso nena .... es la primera vez que me comentan con ese problema o_O

    ResponderEliminar

Nota: solo los miembros de este blog pueden publicar comentarios.