terça-feira, 13 de setembro de 2011

Estrelinhas caindo do cursor do mouse com efeito arco-íris

Hoy genteMini Gifs! Irei ensinar como colocar as estrelinhas caindo do mouse com efeito arco-íris. Olhem que fofo:

1- Copie este código#TUTORIAL#:


<script type='text/javascript'>
// <![CDATA[
function initCursor() {
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();
}}

var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
var sparkles = 35;

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();

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");
rainbow="#"+hex[r]+hex[g]+hex[b]
if (seq==6){
b--
if (b==0)
seq=1
}
if (seq==5){
r++
if (r==12)
seq=6
}
if (seq==4){
g--
if (g==0)
seq=5
}
if (seq==3){
b++
if (b==12)
seq=4
}
if (seq==2){
r--
if (r==0)
seq=3
}
if (seq==1){
g++
if (g==12)
seq=2
}
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.zIndex="10";
div.style.backgroundColor=rainbow;
return (div);
}
window.onload=function()
{
initCursor()
initImage()
startTime()
}

function initImage() {
imageId = 'menu'
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = "visible";
fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 10;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 120);
}
}
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}

function changeNav(id) {
document.getElementById('content').innerHTML=document.getElementById(id).innerHTML;
document.getElementById('main').innerHTML=document.getElementById('home').innerHTML;
document.getElementById('rabbit').style.top="275px"
document.getElementById('penguin').style.top="532px"
}

function hidestatus(){
window.status=""
return true
}
// ]]>
</script>

<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>

<div class='navbar section' id='navbar'><div class='widget navbar' id='navbar1'><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener("load",
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
function showRelatedContent(args) {
var el = document.getElementById('related-iframe');
if (el.parentNode.style.display != 'none') {
el.parentNode.style.display = 'none';
document.onclick = showRelatedContent.prevOnClick;
return;
}

var match = /(?:^[?]|&)c=([0-9]+)(?:&|(?!.))/.exec(args);
if (match !== null) {
document.getElementById('related-loading').style.left = match[1] + 'px';
el.style.left = Math.max(0, match[1] - parseInt(el.width) / 2) + 'px';
}
el.src = "http://www.blogger.com"
+ '/related-content.g?q='
+ window.location.href
+ '&id=' + "7792698363959436653";
el.parentNode.style.display = 'block';
showRelatedContent.prevOnClick = document.onclick;

// Hide related-content dropdown when clicking anywhere but on it.
document.onclick = function() {
var el = document.getElementById('related-iframe');
if (el.parentNode.style.display != 'none') {
el.parentNode.style.display = 'none';
}
document.onclick = showRelatedContent.prevOnClick;
};
}
</script></div></div>


2- Vá em Design Adicionar um gadget HTML/JavaScript Cole o código(não coloque titulo).



                                        
Thanks ao Blog da Danii por me passar o código.

47 comentários:

  1. EU VI uahsuahsuah nossa eu fiquei boba porque tipo umas 39 pessoas tem como meta serem indicadas no meu blog, daí eu pensei:

    '' nossa! vale isso tudo ser indicado pelo meu blog?''

    É realmente muito gratificante.Muito obrigada à você por todo carinho, não tem de que agradecer *-*

    ResponderExcluir
  2. Oi adorei seu blog e já estou seguindo.
    Voce poderia votar em mim num concurso?Seu voto é muito importante para mim!
    coisasdegarotasoficial.blogspot.com
    obrigada!!!
    garotassuperfashions.blogspot.com

    ResponderExcluir
  3. Olá,
    Parabéns pelo blog! Estou seguindo.
    Segue lá também..

    http://estanteseletiva.blogspot.com/

    ResponderExcluir
  4. Ah, obrigada por colocar os créditos a mim, e que bom que vc gostou! ^^

    http://meublogblogdadanii.blogspot.com/

    ResponderExcluir
  5. Ei amiga, fiquei muito feliz de vc aceitar afiliaçao, acabei de colocar seu banner la , da uma olhadinha,beijos !!!

    http://aprendizdecabeleireira.blogspot.com/p/parcerias.html

    ResponderExcluir
  6. Oie!
    Amei o blog, to seguindo, segue de vota?
    Mil beijooos!

    ResponderExcluir
  7. Oi! Adoramos o blog. Estamos com sorteio lá no nosso! Dá uma conferida lá.Beijos
    http://www.dose-tripla.blogspot.com

    ResponderExcluir
  8. Fica super fofo *-*
    Segue?
    http://sweetdreamssah.blogspot.com/

    ResponderExcluir
  9. aaawn que fofura de blog, ameei *u*

    http://blogdasmeninasblogueiras.blogspot.com/

    ResponderExcluir
  10. Oi, estou fazendo um intercâmbio nos Estados Unidos e fiz um blog contando minhas experiencias e dando dicas para futuros intercambistas, da uma olhada: http://queridointercambio.blogspot.com/ Beijos!

    estou te seguindo, se puder seguir de volta..

    ResponderExcluir
  11. Tá bem, já estou te linkando também!

    ResponderExcluir
  12. Fique por dentro de tudo que rola no SLZ FASHION, você pode acompanhar a cobertura completa do evento e se sentir à vontade no mundo da moda, basta entrar no site www.deluxetv.com.br e conferir ao vivo.
    As mais renomadas grifes estarão na passarela do SLZ FASHION, confira também todas as fotos(em tempo real)dos desfiles no site www.meuestilogugafernandes.com.br

    ResponderExcluir
  13. Adorei! Meu Blog já tá mais bonito com as estrelinhas!

    Beijos
    http://blogpinkdaana.blogspot.com/

    ResponderExcluir
  14. Eu ameei a fotinha flor, super linda adorei ;)
    Tenha uma ótima terça-feira #:
    Beijos ;*

    ResponderExcluir
  15. Giih,
    Adorei, vou copiar com certeza!!!
    Bjus,

    www.garimpus.com

    ResponderExcluir
  16. Adorei o tuto, ia por no meu mas colorido atrapalha a ler... :/ Bjokas, há giih me ajuda com isso aqui clica no link e ve, rsrs, SOS photoshop, eu sou nova nisso, mas meu pc é velho kkk e não aceito o CS5 só O CS :'(. Mas td bem kk . vou passar o link :

    http://lh4.ggpht.com/-q3cRN6tUSPI/Tm9-oAFkpxI/AAAAAAAAAfQ/ng6i0LO4XT8/s400/fundo%252520rosa%252520para%252520efect.jpg

    ResponderExcluir
  17. Hoy! Acc afiliação? Meu blog tem mais de 340 seguidores :)
    http://teengirls7.blogspot.com/

    ResponderExcluir
  18. adoreeeei esse blog *-*
    já estou seguindo, se puder retribui (:

    tá rolando um concurso lá no blog, se puder, participa :*

    http://leideanediniz.blogspot.com :*

    ResponderExcluir
  19. Oi florzinha,
    Queria pedir um favor!
    Será que você poderia participar do concurso do blog peace love e arrasa garota? tem o primeiro, segundo e terceiro lugar!
    se não der para participar tudo bem, nós entenderemos!
    Para participar entre;
    http://chocoomel.blogspot.com/2011/09/concurso-blog-peace-love-e-blog-arrasa.html
    BjooBjoo
    Gratas pela atenção!

    ResponderExcluir
  20. Obrigada giih :D .
    garotassuperfashions.blogspot.com

    ResponderExcluir
  21. Interessante o cursor em efeito de arco-iris haha

    Beijos,
    Place Fame | Extras | Maratona de Tutoriais | Twitter

    ResponderExcluir
  22. Oi tudo bem?Nossa seu blog é LINDO! Muitoooo fofo, é um dos blogs mais lindos que eu ja vi sério !
    Virei seguidora e adorei as dicas os enfeitinhos o fundo tudo lindo!
    Beijos !E parabéns!

    http://mandycharlotte.blogspot.com

    ResponderExcluir
  23. Gostei bastante mesmo dos tutorial , aproveita participa do 1º sorteio do blog , ta tendo premios exclusivos , leve 1 seguidor e ganhe direito a mais 2 incrições http://perfeitinha-blog.blogspot.com/2011/09/chegou-meu-premio-1-sorteio-do-blog.html

    ResponderExcluir
  24. Bem, estou aqui para dizer que aconteceu uma coisa RUIM para mim, perdi todas as postagens do meu blog por causa de um endereço de e-mail antigo que estava dando problemas :( Perdi tudo, seguidores, posts, toda minha dedicação. Mas, não desisti e refiz para RECONSTRUIR tudo novamente e gostaria muito que seguisse ou curtisse a pagina http://cigarret-he.blogspot.com/ Preciso recuperar nem que for aos poucos, mas a ajuda de outros amigos sempre vai valer a pena. Desde já um beijo e um obrigado e continue assim <33
    PS: Estou retribuindo tá? õ/

    ResponderExcluir
  25. AWWWWW que foofo eessse tutorial KKK
    Partcipa do sorteio de uma paleta de maquiagem? http://www.siteshoow.com/ Obriiiiigada :)

    ResponderExcluir
  26. Tem tag pra vc lá no blog!
    Aproveite ;) http://ricecakes2.blogspot.com

    ResponderExcluir
  27. Eu ameei essas estrelinhas e com certeza já adicionei ao meu blog!
    Meu blog é novo, criei dia 28/09/2011 então não tem muitas coisas ainda.
    http://sweetgirlfriendblog.blogspot.com/

    ResponderExcluir
  28. Há eu botei no meu blog fico perfeito, boa dica.

    Bjs.

    http://blogmuitofofodaaline.blogspot.com

    ResponderExcluir
  29. Eu até consegui colocar esse efeito, mas acho que tem uma coisa errada. Quando o mouse está no lado direito, caem estrelinhas do lado esquerdo..(?) Pode me ajudar??

    ResponderExcluir
  30. Eu fiz! É muito lindo *-*

    http://sonhosdeumadocegarota.blogspot.com/

    ResponderExcluir
  31. esse foi muito massa muito legal, funcionou, até vou fazer um selo pra vc em contribuição a todas as essas ajudas, mais o meu negocinho de voltar ao topo nao funcionou e eu fiz e refiz direitinho,duas vezes oq eu faço agora vc sabe?

    ResponderExcluir
  32. Ameei a dica , funcionou direitinho><
    Parabens pelo seu blog , ele é otimo!
    dá uma passada no meu ,espero que goste
    http://sonhocoreano.blogspot.com.br/
    p.s : é uma fanfic !Kissus ^-~'

    ResponderExcluir
  33. Oi, tem uma menina que copiou seu post:http://vidademeninael.blogspot.com.br/2012/08/hoieeeee-hoje-eu-vou-ensinar-como.html#comment-form

    ResponderExcluir