RV's free DHTML and JavaScript text and graphic scripts

BLOB SPACE

This script has been tested on and shown to work with the following browsers: Internet Explorer version 7 and above Google Chrome version 4 and above Mozilla Firefox version 2 and above Apple Safari version 5 and above Opera version 9 and above (including Opera mobile) Android Browser version 3 and above
23-Jul-20: Re-written to use modern CSS techniques to generate the 'blobs'. 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('#fff', '#edf', '#dbf', '#c9f', '#b7f', '#a5f', '#93f'); // colours for animation var speed=100; // speed of animation, lower is faster /**************************\ Blob Space Graphic Effect * (c)2010-20 mf2fm web-design * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * \**************************/ if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) { var oldonload=window.onload; if (typeof(oldonload)!='function') window.onload=funky; else window.onload=function() { if (oldonload) oldonload(); funky(); } } addRVLoadEvent(whizzy); var div; var ring=new Array(); var swide=screen.width; var shigh=screen.height; var count=0; var roun=new Array(0, 0, 0); var nour=new Array(0, 0, 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<50; i++) ring['col'+i]=new Array(); add_blobs(); } function add_blobs() { var f, h, i, j, k, w; for (i=15; i<swide1.5;) { f=Math.floor(5+45(i/swide)); ring['row'+count]=new Array(); for (j=0; j<50; j++) { h=-f/8+i/2Math.cos(Math.PIj/25); w=f/5+i/2Math.sin(Math.PIj/25); 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.width=f+'px'; dvs.height=f+'px'; dvs.backgroundColor=colsel[colsel.length-1]; dvs.borderRadius="50%"; ring['row'+count][j]=k; ring['col'+j][count]=k; div.appendChild(k); } count++; i+=2.2f; } nour[0]=nour[1]=nour[2]=count; setTimeout('zoomer(0)', speed); setTimeout('zoomer(1)', speedcount/3); setTimeout('zoomer(2)', speed2*count/3); } function zoomer(n) { for (var i=0; i<50; i++) { var tc=Math.abs(-nour[n]+roun[n])%(count-2); if (tc<colsel.length && ring['col'+i][roun[n]]) ring['col'+i][roun[n]].style.backgroundColor=colsel[tc]; } if (++roun[n]==count) { roun[n]=0; nour[n]++; setTimeout('zoomer('+n+')', speed); } else zoomer(n); } // ]]> </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.

Copyright notice: All scripts are © copyright mf2fm.com. You can use them wherever and whenever you wish, however the copyright notice at the start of the script should remain intact and a link back to this page would be appreciated. The address for this page is: http://www.mf2fm.com/rv/dhtmlblobspace.php.

This page has been viewed 225 times. It was last viewed on Sat 21 Dec, 2024 at 10:06