Rainbow Effect- Text Color Animation script

This javascript is used to display the given text in rainbow color effect. It helps us to apply rainbow color effect to perform animation to any web pages.

Features

  • Used to display text in rainbow effect.
  • Simple and easy to use.

Preview

Enter Text

Downloads

Javascript Code


<!-- Script by hscripts.com -->
<!-- More scripts @www.hscripts.com -->
<script type="text/javascript">
var timer;
function toSpans(span) {var str=span.firstChild.data;var n=str.length;
span.removeChild(span.firstChild);for(var i=0; i<n; i++) {var theSpan=document.createElement("SPAN");
theSpan.appendChild(document.createTextNode(str.charAt(i)));
span.appendChild(theSpan);}
}
function RainbowSpan(span, hue, deg, brt, spd, hspd) {
this.deg=(deg==null?360:Math.abs(deg));
this.hue=(hue==null?0:Math.abs(hue)%360);
this.hspd=(hspd==null?3:Math.abs(hspd)%360);
this.length=span.firstChild.data.length;
this.span=span;
this.speed=(spd==null?50:Math.abs(spd));
this.hInc=this.deg/this.length;
this.brt=(brt==null?255:Math.abs(brt)%256);
this.timer=null;toSpans(span);
this.moveRainbow();
}
RainbowSpan.prototype.moveRainbow = function() {if(this.hue>359) this.hue-=360;
var color;var b=this.brt;var n=this.length;var h=this.hue;for(var i=0; i<n; i++){
if(h>359) h-=360;
if(h<60){color=Math.floor(((h)/60)*b); red=b;grn=color;blu=0; }else if(h<120){ color=Math.floor(((h-60)/60)*b); red=b-color;grn=b;blu=0; }else if(h<180){ color=Math.floor(((h-120)/60)*b); red=0;grn=b;blu=color; }
else if(h<240){ color=Math.floor(((h-180)/60)*b); red=0;grn=b-color;blu=b; }else if(h<300){ color=Math.floor(((h-240)/60)*b); red=color;grn=0;blu=b; }
else{ color=Math.floor(((h-300)/60)*b); red=b;grn=0;blu=b-color; }h+=this.hInc;
this.span.childNodes[i].style.color="rgb("+red+", "+grn+", "+blu+")";
}this.hue+=this.hspd;
}
function ctck()
{var sds = document.getElementById("dum");
if(sds == null){alert("You are using a free package.\n You are not allowed to remove the tag.\n");}var sdss = document.getElementById("dumdiv");if(sdss == null){alert("You are using a free package.\n You are not allowed to remove the tag.\n");
}
}
document.onload="ctck()";
</script>
<!-- Script by hscripts.com -->


HTML Code


<!-- Script by hscripts.com -->
<form name='form1'>
<table align='center'><td>Enter Text</td><td><input type='text' size='50' name='rainbowtext' id='rainbowtext' style='border: thin solid #4682B4;'></td></tr>
<tr><td colspan='2' align='center'><input type='button' value='submit'
onClick='rain()'><div style="font-size: 10px;color: #dadada;" id="dumdiv">
<a href="https://www.hscripts.com" id="dum" style="text-decoration:none;color: #dadada;">&copy;h</a></div>
</td></tr>
<tr><td align='center' colspan='2'>
<div id="r1" style='border: 1px solid white;'></div>
</td></tr></table>
</form>
<script type="text/javascript">
function rain() { var text=document.getElementById("rainbowtext").value;
document.getElementById("r1").innerHTML=text;var r1=document.getElementById("r1"); var myRainbowSpan=new RainbowSpan(r1, 0, 316, 215, 30, 15);
}
</script>
<!-- Script by hscripts.com -->

  • Release Date - 11-02-2010
  • Get free version without ©copyright link for just $10/-
  • For customization of this script or any script development, mail to support@hscripts.com

Usage

  • Copy and paste the javascript code into your HTML page and make use of this animation.
  • This script is used to display the given text in rainbow effect.

License

Related Scripts

Free Javascript Scripts


Ask Questions

Ask Question