RV's free DHTML and JavaScript text and graphic scripts

BLOB VORTEX

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
22-Jul-20: Re-written to use modern CSS techniques to generate the 'blobs'. 08-Feb-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 Vortex 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=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<50; i++) ring['col'+i]=new Array(); add_blobs(); setTimeout('zoomer()', speed); } 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=count; } function zoomer() { for (var i=0; i<50; i++) { var tc=Math.abs(i-nour+roun)%colsel.length; if (ring['col'+i][roun]) ring['col'+i][roun].style.backgroundColor=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, a whirling blob vortex will form along which your web-page will travel at the speed you have selected and in the colours you have chosen.

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/dhtmlblobvortex.php.

This page has been viewed 250 times. It was last viewed on Sat 21 Dec, 2024 at 12:59