Faça Parte do Nosso Blog!

Receba Nossas Atualizações ou Siga-nos:

Siga Nosso Blog

Siga Nosso Blog e tenha Acesso ao Nossos Artigos no painel Blogger.
Seguir
OU

Assine Nosso Feed

Assine Nosso Feed e Tenha Acesso a Todos os Nossos Artigos por E-mail
Inscreva-se

segunda-feira, 19 de setembro de 2011

Efeitos Estrelinhas Caindo do Cursor do Mouse

Esse efeito é bem simples de colocar e funcionou bem com vários navegadores: Internet Explorer, Firefox e Google Chrome.

× Entre na pagina Desing > Editar HTML, procure por </body> e cole esse código antes dessa linha que acabou de achar:


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

Para trocar a cor deste efeito você só precisa mudar o código que está logo no começo do código:
var colour="#FFD700";

Veja aqui o código das cores. Outro ajuste interessante é a quantidade de estrelinhas isso você altera em var sparkles=50. Esperamos que gostem deste efeito para seu blog.

14 comentários:

  1. onde fika essa pasta desing ?

    ResponderExcluir
  2. aff estragasse meu tumblr ,botei esse código enunca mais entreou _|_ seu FDP

    ResponderExcluir
    Respostas
    1. então voc que fez errado, não precisa xingar ele _|_

      Excluir
    2. ALÉM DE BURRA, MAL EDUCADA.....VAI LAVAR A BOCA COM SABÃO SUA ANTA!!!! KKKKKKKKKKKK

      Excluir
  3. Compаnies don't have the suitable to claim that their solutions are effective or even the most effective till credible final results are showcased and verified by the consumers.

    My homepage :: homepage

    ResponderExcluir
  4. nossa amei muito obg , e o seu blog sempre nota 10 parabens :)

    ResponderExcluir
  5. You really maκe іt sеem ѕo еasy with youг presеntatіon
    but ӏ find this matteг to be actually something thаt I think I
    would never understand. It ѕeеms too complex аnd еxtremelу broaԁ fοг me.
    I'm looking forward for your next post, I'll tгy to gеt the hаng of it!


    My ωebsite: please click the following article

    ResponderExcluir
  6. vc estrago meu tumblr, explica direito e não vem falando q eu fiz errado pq eu segui as "dicas" do jeito q tava ai

    ResponderExcluir
    Respostas
    1. BURRINHA....SE VC SEGUIU E NÃO DEU CERTO É PQ FEZ TUDO ERRADO....KKKKKK.....É FÁCIL DEMAIS FAZER ISSO!!! VOLTE A ESTUDAR!!! KKKKKKKKK

      Excluir
  7. There two processes for the vehicle which created just before 1996 and after 1996.

    The OBD 2007 computer software interface is incredibly very
    well arranged.

    my weblog - obd2 software

    ResponderExcluir
  8. Grеаt site you have here but I was сuгious if you κnew of any discussion boards that cоver the same topics ԁisсussed hеre?
    I'd really like to be a part of online community where I can get feedback from other knowledgeable people that share the same interest. If you have any suggestions, please let me know. Thank you!

    Have a look at my web blog - their website

    ResponderExcluir
  9. ACHEI ÓTIMO, CONSEGUI DE PRIMEIRA.....PARABÉNS!!!
    QUEM NÃO CONSEGUIU PQ É BURRO DEMAIS...KKKKKK

    ResponderExcluir
  10. QUEM XINGA É PQ NÃO CONSEGUE FAZER, A INCAPACIDADE É GRANDE DEMAIS!!! VOLTAR A ESTUDAR SERIA UMA OPÇÃO!!! :P

    A DONA DO BLOG TEVE A MAIOR BOA VONTADE DE EXPLICAR, E SE SAIU MUITO BEM!!!

    ESTÁ DE PARABÉNS!!!
    ABRAÇOS *-*



    ResponderExcluir