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 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
24-Nov-2011: Updated to use 'position:fixed' if available. 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-11 mf2fm web-design * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ***************************/ var swide, shigh, boddie; var h=new Array(); var v=new Array(); var op=1/(effects+1); window.onload=function() { if (document.getElementById) { var i, d, s; boddie=document.createElement("div"); s=boddie.style; s.position="fixed"; s.backgroundColor="transparent"; s.top="0px"; s.left="0px"; s.width="100%"; s.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(boddie, document.body.firstChild); set_width(); 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; boddie.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; boddie.appendChild(d); } setInterval('groovy()', speed); }} 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() { 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() { var sw_min=999999; var sh_min=999999; if (document.documentElement && document.documentElement.clientWidth) { if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth; if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight; } if (typeof(self.innerWidth)!="undefined" && self.innerWidth) { if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth; if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight; } if (document.body.clientWidth) { if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth; if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight; } if (sw_min==999999 \|\| sh_min==999999) { sw_min=800; sh_min=600; } swide=sw_min; shigh=sh_min; boddie.style.height=shigh+"px"; } // ]]> </script> CLICK HERE to select the above script ready to paste it into your clipboard
STEP 2: If you wish, change the colours and other parameters at the start of the script.
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!

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

This page viewed 2031 times. Last viewed Sat 4 Feb, 2012 at 06:34