In Tutoriais

Corações caindo do ponteiro do mouse!!!!!!

Ainda não havia encontrado tutoriais em português de como colocar corações caindo do ponteiro do mouse, apesar de jah ter visto em alguns blogs. Mas graças ao blog da Annyz (lindo blog e ela é muito gentil!!!!), fiquei sabendo como se faz isso. E é tão simples!!!
Simplesmente fofo!!!
Copie esse código:








<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>

Vá em Layout, Elementos da Página, clique em Adicionar Gadget e depois em html/JavaScript e cole. Visualize e se gostar, salve. Se vc usar aquele código de colocar estrelinhas no mouse, tem que removê-lo para depois colar este ok?
Para mudar a cor dos corações, é só modificar o código var colour ="#666666"; substituindo o que está de vermelho pelo código da cor que vc preferir. (Aqui vc encontra cores e seus códigos html)

Eu adoreii!!!!!!!Photobucket

Related Articles

27 comentários:

  1. amei teu blog estou te seguindo me segue de volta?


    http://pimenta-dooce.blogspot.com/

    ResponderExcluir
  2. Adorei o tutorial e o blog também..
    Já estou seguindo.

    Bjs!
    http://justteen-jt.blogspot.com/

    ResponderExcluir
  3. Que lindo teu blog *-* e é da Jolie meu caderno desse ano *-*
    a mesma bonequinha e tudo rs' mais enfim, estou te seguindo, segue-me se der ^^
    http://justlovethays.blogspot.com/

    ResponderExcluir
  4. Oi Thays ^^ Seja bem vinda :)
    A Jolie é mto fofa neh! Adoro ela!!!
    beijinhus e eu vou ao seu blog sim :3

    ResponderExcluir
  5. Ameei mesmo não só aqui quanto tudo!!! Parabéns!!
    Por favor como você conseguiu por este botão do menu?
    Preciso de muuuuuitas ajudas! Qualquer dia me ajuda? Obrigada.
    http://mundocorderosa15.blogspot.com/ Beijos.

    ResponderExcluir
  6. Obrigada ^^ Fico muito feliz por vc gostar daqui :3
    Eu consegui fazer isso graças a um site em espanhol. Vou deixar o link para vc: http://cutekawaiilove-love.blogspot.com/2011/11/tutorial-slide-c-box.html

    ResponderExcluir
  7. como faço pra colocar o coraçao do tamanho do seu, quero ele subindo tbm. igual ao teu. bjoss

    ResponderExcluir
  8. Oi Gleicy ^^
    Obrigada por estar aqui :3
    Postei sobre esse efeito de corações que uso no ponteiro do mouse aqui do blog neste post: http://reinokawaii.blogspot.com/2011/11/efeitos-kawaii-objetos-caindo-e.html
    E tem muitos efeitos!!! Espero que goste ^^
    beijus<3

    ResponderExcluir
  9. Olá desculpe incomodar de novo, é que o blog (em espanhol) foi excluído! Você poderia me passar o tutorial? Por favor, qualquer coisa meu blog é mundocorderosa15.blogspot.com! Beijos sempre vejo seu site!

    ResponderExcluir
  10. Puxa Dani, eu não sabia...é uma pena porque o site era bom demais ;__; Talvez esteja em reforma neh...
    Vou tentar postar o tutorial aqui novamente, assim que eu puder ok?
    Beijinhus e muito obrigada pela visita e comentário<3

    ResponderExcluir
  11. Estou seguindo!! amei o blog (achei super cute)bjs entra no meu blog: http://sweetkprincess.blogspot.com/

    ResponderExcluir
  12. :j Obrigada e seja bem vindaaa!!!
    Claro que visito vc tbm ^^
    beijus<3

    ResponderExcluir
  13. oi amei o teu blog me segue, gostaria de fazer meu blog fica assim como teu encantado...
    bjs

    ResponderExcluir
    Respostas
    1. Muito obrigada ^^ Seja sempre bem vinda!
      Retribuirei o carinho ;3
      Beijus...

      Excluir
  14. Legal fiz no meu ficou lindo seguindo sdvt http://amantesdecupcake.blogspot.com.br/

    ResponderExcluir
  15. Muitoo legal!
    Espero que de certo!
    Bjoss
    http://myperfectdrean.blogspot.com.br/

    ResponderExcluir
  16. Estava procurando esses corações e encontrei aqui,muito obrigada *-*

    ResponderExcluir
  17. nossa PARABÉNS FLOR =) seu Blog e show >.< adorei tudo, eu estava procurando o link para colocar coraçãozinhos caindo do mouse no meu Blog, e eu encontrei só aqui. Mais uma vez, parabéns! E muito obrigada, vc me ajudou muito. grande bjo. Haaa to seguindo seu Blog ;) se der segue o meu de volta, será um prazer =) http://fcglasminapiradegvnoticias.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Muito obrigada e seja bem vindaaa!!!
      Me alegra muito que esteja aqui <3
      Beijinhus ;3

      Excluir
  18. Oie,td bom?
    adorei seu blog,muito legal xD
    vc gostaria de visitar,comentar e seguir meu blog?é sobre o meu mangá que estou criando.
    te espero lá!
    http://gliter-lovely.blogspot.com.br/

    ps. ja estou seguindo vc ^^

    bjooos ♥

    ResponderExcluir
  19. Aaawn, Ajudou muito eu tentei varias vezes e nada, mais eu achei seu blog e pronto rsrsrsrs, Obrigada <3
    http://mundofemininooficial.blogspot.com.br/

    ResponderExcluir
  20. Respostas
    1. Pode ser usado no tumblr tambem :3
      No windows, ha como criar o efeito de coracoes pela tela usando um programa chamado click star 2 (ja postei sobre ele aqui no blog :) e gifs d coracoes.
      Bjinhus<3

      Excluir
  21. bbbuuuuáááá...o código não está funcionando

    ResponderExcluir
    Respostas
    1. Testei aqui e continua funcionando normal. Talvez seja algum conflito entre scripts que você já tenha e esse...tenta de novo. Pode add em um gadget html/javascript.
      Bjus..

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart