Estrelinhas falsas seguindo o mouse

domingo, fevereiro 27, 2011

Estrelinhas falsas, que na verdade é um símbolo de + seguindo o ponteiro do mouse, é este que estou usando, conforme você movimenta o mouse os sinais de + vão ' caindo ' dá um efeito muito bonito, vale a pena usar. Este tutorial foi produzido por mim, é proibido a distribuição dele em seu blog, se usar credite!



Vá no HTML do seu blog e procure pela tag <head> que fica bem no início do código.

Adicione esse código logo abaixo da tag:

<script type='text/javascript'>
// <![CDATA[
var colour="#FF80C0";
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>

Você pode alterar a cor do +, para isso é só você editar var colour="#FF80C0"; trocando #FF80C0 pelo código da cor que você desejar.

OBS: Esse código se refere a cor rosa

Depois que colocar o código e editar como quiser, é só salvar e prontinho!

You Might Also Like

16 comentários

  1. Oi Thays, já recoloquei seus créditos! é que eu tava fazendo modificações e tive que tirar mas já coloquei! beijos! http://trasshygirl.blogspot.com

    ResponderExcluir
  2. Oi Thays
    Adoreio site, parabéns, seus tutoriais ajudam muito nossas vidas kkk'
    o Theme é mt fofo.
    Beijos

    ResponderExcluir
  3. ola amada ,legal seu blog,irei visitar mais ,ja estou te seguindo,aguardo a visita no meu e se gostar me seguir tambem viu,beijos
    http://isabel-belaarte2010.blogspot.com/

    ResponderExcluir
  4. OI Thays, seu blog é uma graça, impossível não seguir!
    Hoje no Agite falamos sobre moda, e no PhD estamos na
    última semana especial dieta. Quer conferir?
    http://agiteantesdeusar2.blogspot.com
    http://phdemseilaoque.blogspot.com

    Esperamos você!
    Um beijo!

    ResponderExcluir
  5. Hey, eu já vi esse tutorial em 3 outros blogs. este tutorial não é de sua autoria...

    ResponderExcluir
  6. Sr Anônimo, em primeiro lugar não está escrito que é de minha autoria e sim que foi produzido, que significa o mesmo que elaborado, a partir do momento que eu fiz uma modificação para que funcionasse melhor, eu o reproduzi e reelaborei
    Fui clara?
    Da próxima vez então, melhore sua interpretação e venha falar comigo, bebê.
    Um beijo, Thays.

    ResponderExcluir
  7. Oi linda, adoguei essa post vai me ajudar muito, mais estou com dificuldade para achar a palavra do HTML no meu blog, será que poderia me ajudar?
    Obrigada até mais =*

    ResponderExcluir
  8. adoreii *-* http://sabrinaapenasumaaprendiz.blogspot.com/

    ResponderExcluir
  9. Olá! Olhe, levei seu cursor de estrelinhas! Espero que não se importe!

    Kisses
    Tixa :)

    ResponderExcluir
  10. Diga só mais uma coisa, o que é creditar?

    Kisses
    Tixa :)

    ResponderExcluir
  11. LEGAL TEU BLOG... TO SEGUINDO... SIGA-NOS

    LUCRE 35% DE COMISSÕES DIVULGANDO NOSSO BANNER EM SEU BLOG

    CADASTRE-SE GRÁTIS E DIVULGUE GRÁTIS SEU BLOG

    www.toseek.com.br

    OBRIGADO!
    Marcos Roberto

    ResponderExcluir
  12. Oi linda, não podia sair sem comentar, hihi. Amei seu blog, muito fofo e útil, pra quem não tem muito jeito ainda com html e blogger.
    Estarei sempre fazendo uma visitinha. Bjim =*

    ResponderExcluir
  13. Eu também já tenho no meu blog^^ Espero que não faça mal!!!

    Kiss Bunny^^

    ResponderExcluir
  14. Seu blog é muito lindo! :D Olha lá no meu blog, eu coloquei seu banner *-*
    Eu queria fazer um pra mim, só qêe não consigo :(

    ResponderExcluir
  15. Seu blog me ajudou muito..Meus blogs ficaram bem mais lindos com seus acessorios..E claro coloquei os devidos créditos..Bjs

    ResponderExcluir

Popular Posts

SUBSCRIBE

Like us on Facebook

Flickr Images

Instagram

Subscribe