Rainbow effect on text

Written by @kerixa 21 August 2012

It makes the text colorful with changing the color gradually from left to right like a rainbow.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->
<!--      This fades the text color giving you a rainbow effect.
          Change it by playing with the <FONT COLOR= >  -->

<script language="JavaScript">
<!-- Hide the script from old browsers --

// Modified by CoffeeCup Software

function MakeArray(n)
{
  this.length=n;
  for(var i=1; i<=n; i++) this[i]=i-1;
  return this
}

hex=new MakeArray(16);
hex[11]="A"; 
hex[12]="B"; 
hex[13]="C"; 
hex[14]="D"; 
hex[15]="E"; 
hex[16]="F";

function ToHex(x)
{
// Changes a int to hex (in the range 0 to 255)
  var high=x/16;
  var s=high + "";
  s=s.substring(0,2);
  high=parseInt(s,10);
  var left=hex[high+1];

  var low=x-high*16;
  s=low+"";
  s=s.substring(0,2);
  low=parseInt(s,10);
  var right=hex[low+1];

  var string=left + "" + right;
  return string;
}

function fadein(text)
{
  text=text.substring(3,text.length-4);

  color_d1=255;
  color_d1b=255;
  color_d1c=255;

  mul=color_d1/text.length;   
  for(i=0;i<text.length;i++)
  {
    color_d1=mul*i; 
    color_d1b=255-mul*i;
    color_d1c=255*Math.sin(i/(text.length/3));
// *******
// some other things you can try>> "=255-mul*i" to fade out, "=mul*i" to fade in, or try "255*Math.sin(i/(text.length/3))"
// *******
    color_h1=ToHex(color_d1);
    color_d2=mul*i;
    color_h2=ToHex(color_d2);

    color_h1b=ToHex(color_d1b);
    color_d2b=mul*i;
    color_h2b=ToHex(color_d2b);

    color_h1c=ToHex(color_d1c);
    color_d2c=mul*i;
    color_h2c=ToHex(color_d2c);

    document.write("<FONT COLOR='#FF8000"+color_h1+color_h2+"'>"+text.substring(i,i+1)+'</FONT>');
  }
}
// --End Hiding Here -->
</script>
<SCRIPT LANGUAGE="JavaScript">
<!--
{  fadein("-->This is the Text, just put yours here !<!__");  }
//-->
</SCRIPT><a target='_blank' href='https://www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: CryptoTech, AstroAudrey, admin_js, bloxio, yqaice
advertisement 2