sexta-feira, 20 de maio de 2011

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

Quem escreveu esse post?


Foi a Roberta, que adora tudo o que for kawaii, macio, fofo, de chocolate e com morango no topo. Se ela não estiver online por aqui, você pode encontrá-la também em...


Caso queira adicionar um emoticon/emoji ao seu comentário, copie o link de uma das imagens abaixo:

27 comentários

amei teu blog estou te seguindo me segue de volta?


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

REPLY

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

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

REPLY

Obrigada meninas :3
beijos ^^

REPLY

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/

REPLY

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

REPLY

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.

REPLY

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

REPLY

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

REPLY

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

REPLY

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!

REPLY

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

REPLY

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

REPLY

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

REPLY

amei os coraçoeszinhoss bjuu

REPLY

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

REPLY

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

REPLY

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

REPLY

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

REPLY

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

REPLY

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/

REPLY

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

REPLY

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 ♥

REPLY

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

REPLY

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

REPLY

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

REPLY

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

REPLY

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

Reino Kawaii . 2018 Copyright. All rights reserved. Designed by Blogger Template | Free Blogger Templates