Step Back in Time to the 1970s with RV's free DHTML and JavaScript text and graphic scripts

GROOVY 1970s Effect
This script has been tested on and shown to work with Internet Explorer 5+, Netscape 6+, Firefox 1.0, Safari 3 and Opera 7+. Internet Explorer must be in 'standards compliant' mode for this script to work correctly.
01-Oct-2008: 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 border=50; // how wide is each border var effects=3; // how many of the effect are on the page var speed=50; // how fast is the animation (lower is faster) var colours=new Array("#9cf", "#c9f", "#fc9", "#f9c", "#cf9", "#9fc", "#6ff", "#f6f", "#ff6"); // above line lists colours for the groovy effect (can be as long or short as you like) /**************************** 1970s Groovy WebPage Effect * (c) 2008 mf2fm web-design * * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ***************************/ var swide, shigh; var h=new Array(); var v=new Array(); var op=1/(effects+1); window.onload=function() { if (document.getElementById) { var i, d, s, b; b=document.createElement("div"); s=b.style; s.position="absolute"; s.overflow="hidden"; s.zIndex="-1"; b.setAttribute("id", "bod"); i=document.body.style.backgroundColor; if (document.body.parentNode) { if (i) document.body.parentNode.style.backgroundColor=i; document.body.style.backgroundColor="transparent"; } document.body.appendChild(b); set_width(); set_scroll(); for (i=0; i<effects10; i+=10) { d=document.createElement("div"); s=d.style; s.width="100%"; h[i]=Math.floor(Math.random()shigh/2.5); h[i+1]=Math.floor(Math.random()shigh/2.5); h[i+2]=(Math.random()<0.5?-1:1)(2+Math.floor(Math.random()3)); h[i+3]=(Math.random()<0.5?-1:1)(2+Math.floor(Math.random()3)); s.top=h[i]+"px"; s.bottom=h[i+1]+"px"; s.position="absolute"; s.borderColor=jazz(); s.borderStyle="solid"; s.borderWidth=border+"px 0px"; s.backgroundColor=jazz(); if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100op)+")"; else s.opacity=op; h[i+5]=s; b.appendChild(d); } for (i=0; i<effects10; i+=10) { d=document.createElement("div"); s=d.style; s.height="100%"; v[i]=Math.floor(Math.random()swide/2.5); v[i+1]=Math.floor(Math.random()swide/2.5); v[i+2]=(Math.random()<0.5?-1:1)(2+Math.floor(Math.random()3)); v[i+3]=(Math.random()<0.5?-1:1)(2+Math.floor(Math.random()3)); s.left=v[i]+"px"; s.right=v[i+1]+"px"; s.position="absolute"; s.borderColor=jazz(); s.borderStyle="solid"; s.borderWidth="0px "+border+"px"; s.backgroundColor=jazz(); if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100op)+")"; else s.opacity=op; v[i+5]=s; b.appendChild(d); } groovy(); }} var old_jazz=false; function jazz() { var new_jazz; do { new_jazz=colours[Math.floor(Math.random()colours.length)]; } while ( new_jazz==old_jazz ); old_jazz=new_jazz; return (new_jazz); } function scat(no) { var yes; no=noMath.abs(no); do { yes=2+Math.floor(Math.random()3); } while ( no==yes ); return (yes); } function groovy() { setTimeout("groovy()", speed); var i; for (i=0; i<effects10; i+=10) { h[i]+=h[i+2]; h[i+1]+=h[i+3]; if (h[i]+h[i+1]>shigh-border2) { h[i+4]=h[i+2]; h[i+2]=-h[i+3]; h[i+3]=-h[i+4]; h[i+5].backgroundColor=jazz(); } if (h[i]<-border && Math.random()<1/border) { h[i+2]=scat(h[i+3]); if (h[i+1]>shigh) h[i+5].borderColor=jazz(); } else if (h[i]>shigh && Math.random()<1/border) { h[i+2]=-scat(h[i+3]); } if (h[i+1]<-border && Math.random()<1/border) { h[i+3]=scat(h[i+2]); if (h[i]>shigh) h[i+5].borderColor=jazz(); } else if (h[i+1]>shigh && Math.random()<1/border) { h[i+3]=-scat(h[i+2]); } h[i+5].top=h[i]+"px"; h[i+5].bottom=h[i+1]+"px"; } for (i=0; i<effects10; i+=10) { v[i]+=v[i+2]; v[i+1]+=v[i+3]; if (v[i]+v[i+1]>swide-border2) { v[i+4]=v[i+2]; v[i+2]=-v[i+3]; v[i+3]=-v[i+4]; v[i+5].backgroundColor=jazz(); } if (v[i]<-border && Math.random()<1/border) { v[i+2]=scat(v[i+3]); if (v[i+1]>swide) v[i+5].borderColor=jazz(); } else if (v[i]>swide && Math.random()<1/border) { v[i+2]=-scat(v[i+3]); } if (v[i+1]<-border && Math.random()<1/border) { v[i+3]=scat(v[i+2]); if (v[i]>swide) v[i+5].borderColor=jazz(); } else if (v[i+1]>swide && Math.random()<1/border) { v[i+3]=-scat(v[i+2]); } v[i+5].left=v[i]+"px"; v[i+5].right=v[i+1]+"px"; } } window.onresize=set_width; function set_width() { if (typeof(self.innerWidth)=="number") { swide=self.innerWidth-18; shigh=self.innerHeight-18; } else if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } else { swide=800; shigh=600; } var s=document.getElementById("bod").style; s.width=swide+"px"; s.height=shigh+"px"; } window.onscroll=set_scroll; function set_scroll() { var sleft, sdown; if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop \|\| document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop \|\| document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } var s=document.getElementById("bod").style; s.top=sdown+"px"; s.left=sleft+"px"; } // ]]> </script> CLICK HERE to select the above script ready to paste it into your clipboard
STEP 2: If you wish, change the colours at the start of the script you just copied to be the colour of comet and its tail that you require.
THAT'S IT When your page loads, the background of your page will be transmogrified into a cool 1970s groovy background. This effect is something you would expect from a flash file yet this simple javascript does a smoozy job, man!
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!

[ This page viewed 102 times. Last viewed Fri 30 Jul, 2010 at 17:30 ]