Tutorial Bolhas saindo do mouse

[Compton]

No tutorial de hoje vou ensinar a colocar bolhas saindo do seu mouse, parecidas com essas que estão saindo do seu cursor, aqui no blog. Se você não está vendo clique em Continue Lendo aqui em baixo, para você ir para a página do post e ver como é o efeito.


1º Passo) Copiar o código abaixo e colar em algum editor de texto que você tenho no seu computador.(Bloco de notas ou Word)


<script type="text/javascript">
// <![CDATA[
var colours=new Array("#a6f", "#60f", "#60f", "#a6f", "#ccc"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=66; // maximum number of bubbles on screen

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();

window.onload=function() { if (document.getElementById) {
var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");
rats.style.visibility="hidden";

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter="alpha(opacity=50)";

document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}

function bubble() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+"px";
bubb[c].top=(bubby[c]=y)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
}
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout("bubble()", 40);
}

function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
}
bubb[i].top=bubby[i]+"px";
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}

document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown; }

window.onresize=set_width;
function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}

window.onscroll=set_scroll;
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;
}
}

function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}
// ]]>
</script>

2º Passo) Escolher as cores das bolhas. No começo do código tem uma parte que está destacada com várias cores. Vou repetir essa linha do código aqui para poder explicar como muda as cores.

var colours=new Array("#a6f", "#60f", "#60f", "#a6f", "#ccc");

A parte em :
Vermelho: Cor da parte de cima da bolha
Laranja : Cor do lado direito da bolha
Azul : Cor da parte de baixo da bolha
Roxo : Cor do lado esquerdo da bolha
Preto : Cor do fundo da bolha

OBS: Muito cuidado antes de alterar o código.

Para alterar as cores entre nesse site Apenas usuários registrados e ativados podem ver os links., Clique aqui para se cadastrar... e copie o código HTML da cor e substitua no lugar de qualquer uma das cores do código.

3º Passo) Agora vamos escolher quantas bolhas no máximo vai ter na página. Vou copiar outra parte do código aqui só pra exemplificar. Essa parte esta no começo do código também, junto com a parte das cores.

var bubbles=66

Aqui é só ir mudando o valor e ver qual quantidade de bolhas você prefere.

4º Passo) Agora é só copiar o código que você editou e ir no Tumblr >> Customize >> Themes >> Use Custom HTML >> Agora procure no código por </body>, use CTLR F para procurar. Agora cole o código que você modificou imediatamente antes do </body>. Aperte Update Preview e espere a página carregar, passe o mouse pela sua página que está ao fundo veja se as bolhas estão saindo do mouse e se você gostou do resultado, se sim salve e saia se não gostou aperte Cancel.

[Sulok]

vlw muito bom