RV's free DHTML and JavaScript text and graphic scripts

BLOB SPACE
This script has been tested on and shown to work with Internet Explorer 7+, Firefox 2.0 and Opera 9+ (requires 'position:fixed' to be correctly implemented).
31-Jan-2010: First release.
STEP 1: Copy and paste the code below so that it sits between the <head> and </head> tags at the top of your web-page: <script type="text/javascript"> // <![CDATA[ var colsel=new Array('#edf', '#dbf', '#c9f', '#b7f', '#a5f', '#93f'); // colours for animation - last colour is the 'background' var speed=100; // speed of animation, lower is faster /**************************\ 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<swide1.5;) { f=Math.floor(10+140(i/swide)); // from 10 to 150 ring['row'+count]=new Array(); for (j=0; j<30; j++) { h=-f/8+i/2Math.cos(Math.PIj/15); w=f/5+i/2Math.sin(Math.PIj/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+=f2; } 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> CLICK HERE to select all the above text
STEP 2: Change the colour (and other parameters) at the start of the script you just copied to the settings you require.
THAT'S IT When your page loads, it should zoom through blob space at the speed you have selected.
No menu on the left? Click here for a full list of all the free DHTML and Javascript effects you could be using on your web-site!

Link directly to this page: http://www.mf2fm.com/rv/dhtmlblobspace.php

This page viewed 289 times. Last viewed Thu 17 May, 2012 at 12:40