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<swide*1.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/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>
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!
If you like my Text and Graphic Effects,
please rate them @
ScriptSearch.com
!
- Select -
Excellent!
Very Good
Good
Fair
Poor
[ This page viewed 83 times. Last viewed Fri 30 Jul, 2010 at 00:55 ]