Instala fondo del blog con movimiento de luces tipo Disco

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Hace poco veíamos cómo poner el fondo del blog en movimiento al estilo groovy, ahora veremos cómo ponerle movimiento con unas luces de colores al estilo Disco de los 70s que están siempre en movimiento.

Puedes ver un ejemplo en este blog de pruebas.

El procedimiento es muy sencillo sólo basta insertar un script en el blog, para ello vamos a Diseño | Edición de HTML y antes de </body> pegamos lo siguiente:

<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>

Al inicio del código, en var colsel están los códigos de los colores de las luces, puedes agregar tantos colores como quieras, sólo ten en cuenta que el último color siempre será el color de las luces que se ve en forma pausada.

En var speed podemos controlar la velocidad del efecto, con un número menor se verá más rápido.

Lo he probado en Safari, Opera, Firefox, Chrome e Internet Explorer y en todos funciona, sin embargo en Firefox los círculos se ven más pegados.
Y ahora sí, ¡a sacar los pantalones acampanados!