janeiro 05, 2011

Tutorial - Cursor de mouse estrelas caindo

Cursores de mouses cutes ou não são sempre bem vindos, afinal da um charme ao nosso blog, então vou ensinar a vocês como colocar o cursor de mouse com aquelas estrelinha que ficam caindo, é um codigo enorme, mas vale a pena é muito lindo, tambem vou mostrar como mudar a cor das estrelinhas e dar algumas dicas de cores, bom para isso continue lendo.

Antes de tudo copie o Script:
<script type='text/javascript'>
// <![CDATA[
var colour="#FFFFFF";
var sparkles=50;
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(1, 5);
var rdow=createDiv(5, 1);
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()*3;
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+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

Entre em Desigh > Editar HTML >
Procure pela palavra </body> . Para achá-la mas rápido use o campo de pesquisa das duas teclas "Ctrl+F". Quando encontrar a palavra cole o script antes dela e clique em visualisar (mecha com o mouse para ver se deu certo) se estiver tudo certo clique em Salvar Modelo. E pronto! Para mudar a cor das estrelinhas, você deve alterar o código da cor em var colour="#FFFFFF"A cor das estrelinhas é branco, embaixo mais opções de cores.

PRETO: #000000
VERMELHO: #FF0000
ROSA: #FF69B4
ROXO: #912CEE
AZUL: #0000FF
VERDE: #00FF00
AMARELO: #FFD700
LARANJA: #FF8C00

Caso queira mais cores diferentes, com tons mais específicos use a Tabela de Cores desse site aqui http://cores.gratuita.com.br/ eu acho otimo, porque você pode escolher o tom exato. Depois é só copiar o codigo de #6 digitos e pronto. Espero ter ajudado.

10 comentários:

  1. ooi.
    amei seu blog.
    dá uma olhada no meu:
    www.menina-charmosa.blogspot.com
    Manda um comentário com criticas construtivas, no que eu posso melhorar, ideias pra posts, tudo. AGRADEÇO!

    ResponderExcluir
  2. AAAAAAAAAAA,sabia que eu tava doida pra saber como faz isto? obrigada minha flor.
    http://garotasnasruas.blogspot.com/

    ResponderExcluir
  3. ai ameeo *---* e ja coloquei no meu blog!
    obrigado e beijos amore!
    http://abouteverything-cm.blogspot.com/

    ResponderExcluir
  4. Ahh adoreiii.
    Olha la meu blog www.mundodasgarotasla.blogspot.com
    Seu blog esta me ajudando muuuito
    Adoroo!

    ResponderExcluir
  5. Eu não sei por que eu não consegui por em meu blog =/ fiz tudo do jeito que você explicou e não deu certo =/
    meu blog

    http://coisinhasdapriscilass.blogspot.com.br/

    ResponderExcluir