Mas espero que não me abandonem! então para recompensá-las trouxe um tutorial bem legal e simples(bem pelo menos eu axei) então vamos ao tuto!
Tutorial de como colocar bolhas saindo do cursor
Vá ate seu layout e abra um gadget de html e dentro, cole esse código:
<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>
Agora vamos personalizar as cores, logo de inicio no código tem esse trechinho:
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
Vermelho: Cor da parte de cima da bolha
Laranja: Cor do lado direito da bolha
Rosa: Cor da parte de baixo da bolha
Roxo: Cor do lado esquerdo da bolha
Azul: Cor do fundo da bolha
Verde: A quantidade das bolhas que sai do mouse
Os crédito são World Girl e Mono Kawaii
Espero que tenham gostado beijos!
Não precisa nem pedir desculpa, entendemos haha XD
ResponderExcluiramo essas bolhas, fico brincando com elas lol
fashion em cores -.com
também adorei! haha
ExcluirAdorei, o tuto!! Vou tentar colocar no meu. Porque fica lindooo!!! Amei seu blog o layout dele é lindooo!!E vc é uma fofa. Já estou seguindo esse blog maravilhoso..
ResponderExcluirBeijos amor.
away-from-london.blogspot.com
vai conseguir sim!
Excluirobrigada. beijos
É muito diferente esse tuto e é perfeito, acho lindo quem tem blog com isso, eu fico brincando com o cursor, sahsuasuah
ResponderExcluirCliquesnocapricho.blogspot.com
obrigada flor
ExcluirEu fico brincando com o cursos só pra ver as bolhas ahsahsuahsu' Gostei do tutorial
ResponderExcluirTem um game no meu blog em que todos os participantes serão divulgados! Venha
http://littl-things.blogspot.com.br/2013/08/game-quase-200-seguidores.html
participarei sim! beijos
ExcluirBem criativo gostei , fiquei um tempão brincando com o cursor ahashsua .
ResponderExcluirAmei muito o seu layout !
Estou seguindo o blog , bjo ! :3
http://raingrape.blogspot.com.br/
adorei que vc´s gostaram do post
ExcluirEstou que nem uma boba brincando com as bolhas do mouse kkkkk
ResponderExcluirBeijos :*
Nevando em Nova York
muito lindas essas bolhas rsrs
ExcluirQue legal eu amei mas no meu blog não da rs,
ResponderExcluirte espero em meu blog
Beijoss,
Dreamy Girl's Little World
Clique aqui ->Post de Hoje!