Add Groovy Effect in Blogger

add groovy effect in blogger
Groovy  is a slang colloquialism popular during the 1960s and 1970s. It is roughly synonymous with words such as "cool," "excellent," "fashionable," or "amazing," depending on context. Since other bloggers have this kind of niche or just want to add this kind of effect  in their blog. I was convinced to make an article and share it to my readers as well. See the background of this page for a live demo.
Music video credit.


Also Read: Add Star Space Warp Effect In Blogger

 How to Add Groovy Effect in Blogger


Go to Blogger Dashboard
Click  Template >> Edit HTML
Look for the code below

</head>

Just above that code, paste the code below
<script type="text/javascript">
// <![CDATA[
var border=100; // how wide is each border in pixels
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 (the list can be as long or short as you like)

/****************************
*1970s Groovy WebPage Effect*
*  Bloggingtipsandtrix  *
****************************/

function addLoadEvent(funky) {
  var oldonload=window.onload;
  if (typeof(oldonload)!='function') window.onload=funky;
  else window.onload=function() {
    if (oldonload) oldonload();
    funky();
  }
}

addLoadEvent(yowzah);

var swide, shigh, boddie;
var h=new Array();
var v=new Array();
var op=1/(effects+1);
function yowzah() { 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";
  set_width();
  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);
  for (i=0; i<effects*10; i+=10) {
    d=document.createElement("div");
    s=d.style;
    s.left="0px";
s.width="100%";
    h[i]=Math.floor(Math.random()*(shigh-border)/3);
    h[i+1]=shigh-Math.floor(Math.random()*(shigh-border)/3);
    h[i+2]=(Math.random()<0.5?1:-1)*scat(0);
    h[i+3]=(Math.random()<0.5?1:-1)*scat(h[i+2]);
    s.position="absolute";
    s.top=h[i]+"px";
    s.height=(h[i+1]-h[1])+"px";
    s.borderStyle="solid";
    s.borderWidth=border+"px 0px";
    jazzy(s, 'borderTopColor');
jazzy(s, 'borderBottomColor');
    jazzy(s, 'backgroundColor');
    s.opacity=op;
    if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
    h[i+5]=s;
    boddie.appendChild(d);
  }
  for (i=0; i<effects*10; i+=10) {
    d=document.createElement("div");
    s=d.style;
s.top="0px";
    s.height="100%";
    v[i]=Math.floor(Math.random()*(swide-border)/3);
    v[i+1]=swide-Math.floor(Math.random()*(swide-border)/3);
    v[i+2]=(Math.random()<0.5?1:-1)*scat(0);
    v[i+3]=(Math.random()<0.5?1:-1)*scat(v[i+2]);
    s.position="absolute";
    s.left=v[i]+"px";
    s.width=(v[i+1]-v[i])+"px";
    s.borderStyle="solid";
    s.borderWidth="0px "+border+"px";
    jazzy(s, 'borderLeftColor');
    jazzy(s, 'borderRightColor');
    jazzy(s, 'backgroundColor');
    if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
    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 jazzy(hip, jive) {
var new_jive;
do { new_jive=colours[Math.floor(Math.random()*colours.length)]; }
while (new_jive==hip[jive]);
hip[jive]=new_jive;
}

function scat(no) {
var yes;
no=Math.abs(no);
do { yes=2+Math.floor(Math.random()*3); }
while ( no==yes );
return (yes);
}

function groovy() {
  var i;
  for (i=0; i<effects*10; i+=10) {
h[i]+=h[i+2];
h[i+1]+=h[i+3];
if (h[i+1]-h[i]<5) {
 h[i+4]=h[i+2];
 h[i+2]=h[i+3];
 h[i+3]=h[i+4];
 jazzy(h[i+5], 'backgroundColor');
}
    if (h[i]<-border) {
if (h[i+2]<0 && Math.random()<1/border) {
h[i+2]=scat(h[i+3]);
jazzy(h[i+5], 'borderTopColor');
}
}
if (h[i+1]>shigh) {
if (h[i+3]>0 && Math.random()<1/border) {
h[i+3]=-scat(h[i+2]);
jazzy(h[i+5], 'borderBottomColor');
}
}
h[i+5].top=h[i]+"px";
    h[i+5].height=(h[i+1]-h[i])+"px";

v[i]+=v[i+2];
v[i+1]+=v[i+3];
if (v[i+1]-v[i]<5) {
 v[i+4]=v[i+2];
 v[i+2]=v[i+3];
 v[i+3]=v[i+4];
 jazzy(v[i+5], 'backgroundColor');
}
if (v[i]<-border) {
if (v[i+2]<0 && Math.random()<1/border) {
v[i+2]=scat(v[i+3]);
jazzy(v[i+5], 'borderLeftColor');
}
}
if (v[i+1]>swide) {
if (v[i+3]>0 && Math.random()<1/border) {
v[i+3]=-scat(v[i+2]);
jazzy(v[i+5], 'borderRightColor');
}
}
v[i+5].left=v[i]+"px";
    v[i+5].width=(v[i+1]-v[i])+"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 Save Template button and congratulations!
Must Read: Add Fireworks Effect In Blogger
From: mf2fm
About the Author:
tilt  hover effect
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV

Related Posts Plugin for WordPress, Blogger...