segunda-feira, 29 de agosto de 2011

Fundo "Disco" para blog



 Neste post veremos como colocar luzes em movimento ao estilo disco anos 70. Veja o exemplo abaixo:





 Para isto, basta irmos em Design > Editar HTML e antes de < /head> colar o seguinte:


<script type='text/javascript'>
// <![CDATA[
var colsel=new Array('#E80F02', '#DB52EE', '#45E350', '#E7E61A', '#0B82DE', '#D7DF01');
var speed=100;

/*
Blob space Graphic Effect
(c)2010 mf2fm web-design
http://www.mf2fm.com/rv
DON'T EDIT BELOW THIS BOX
*/

window.onload=whizzy;
var div;
var ring=new Array();
var swide=screen.width;
var shigh=screen.height;
var count=0;
var roun=0;
var nour=0;
function whizzy() {
var i, dvs;
div=document.createElement('div');
dvs=div.style;
dvs.position='fixed';
dvs.left='50%';
dvs.top='50%';
dvs.width='1px';
dvs.height='1px';
dvs.overflow='visible';
dvs.zIndex='-1';
i=document.body.style.backgroundColor;
if (document.body.parentNode) {
if (i) document.body.parentNode.style.backgroundColor=i;
document.body.style.backgroundColor="transparent";
}
document.body.insertBefore(div, document.body.firstChild);
for (i=0; i<30; i++) ring['col'+i]=new Array();
add_blobs();
zoomer();
}

function add_blobs() {
var f, h, i, j, k, w;
for (i=50; i<swide*1.5;) {
f=Math.floor(10+140*(i/swide)); // De 10 a 150
ring['row'+count]=new Array();
for (j=0; j<30; j++) {
h=-f/8+i/2*Math.cos(Math.PI*j/15);
w=f/5+i/2*Math.sin(Math.PI*j/15);
if (h-f/2>shigh/2 || h+f/2<-shigh/2 || w-f/2>swide/2 || w+f/2<-swide/2) continue;
k=document.createElement('div');
dvs=k.style;
dvs.position='absolute';
dvs.left=w-f/2+'px';
dvs.top=h-f/2+'px';
dvs.color=colsel[colsel.length-1];
k.appendChild(document.createTextNode(String.fromCharCode(9679)));
k.style.fontSize=f+'px';
ring['row'+count][j]=k;
ring['col'+j][count]=k;
div.appendChild(k);
}
count++;
i+=f*2;
}
nour=count;
}

function zoomer() {
for (var i=0; i<30; i++) {
var tc=Math.abs(-nour+roun)%(count-2);
if (tc<colsel.length && ring['col'+i][roun]) ring['col'+i][roun].style.color=colsel[tc];
}
if (++roun==count) {
roun=0;
nour++;
setTimeout('zoomer()', speed);
}
else zoomer();
}
// ]]>
</script>

2 comentários:

anonimo disse...

colei e nao deu ,, talvez seja por eu nao entender o que e' antes de ...., por favor amigo me explica de uma maneira mais facil , obrigado

lucas disse...

deu certinhooooooo, fica um monte de bolinha brilhando na tela, superrrrrrr, só que é simplizinho, mais é legallll... gotei memo!

Artigos Relacionados

Related Posts Plugin for WordPress, Blogger...