Thread: Rainbow Text?

    #1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    57
    Rep Power
    2

    Rainbow Text?


    Does anyone how to make a script that will display text but it will change colors based on the letter and time..

    So the rainbow effect, but instead of changing the whole word it will only change the letter...

    Example...

    Instead of this:
    Hello
    Hello
    Hello
    Hello

    It will go like this:
    Hello
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    298
    Rep Power
    8
    I would do this with JavaScript.

    Create an array of colors. Count the length of characters in the string (word). Loop through the word letter by letter with a for loop and change the colors as you wish.

    I must be color blind but I can only see blue and yellow in your text

    Did you want certain letters to be a certain color or did you want each letter to be a different color of the rainbow?

    I suppose another way is to wrap each individual letter in a span tag. and give them different classes or inline styles changing the colors.

    For example:
    Code:
    <p>
        <span style="color: red;">H</span>
        <span style="color: yellow;">e</span> 
        <span style="color:pink;">l</span>
        <span style="color: green;">l</span>
        <span style="color: purple;">o</span>
    </p>
    As you can see this gets very tedious. I wouldn't do it this way but it's a quick alternative to the JavaScript route.

    Kind regards,

    NM.
    Last edited by Nanomech; June 20th, 2013 at 12:18 AM.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    57
    Rep Power
    2
    Ok so here is the code (i found) for it..
    Code:
    <script type="text/javascript">
    // <![CDATA[
    var speed=125; // speed colours change, 1 second = 1000
    var glow=3; // can be set from '0' for no glow, to 10
    var raincol=new Array("#ff0000", "#ff5500", "#ffaa00", "#ffff00", "#aaff00", "#55ff00", "#00ff00", "#00ff55", "#00ffaa", "#00ffff", "#00aaff", "#0055ff", "#0000ff", "#5500ff", "#aa00ff", "#ff00ff", "#ff00aa", "#ff0055"); // change the colours if you want to
    var alink=""; // page to link text to (set to ="" for no link)
    
    /****************************
    *    Rainbow Text Effect    *
    *(c)2003-13 mf2fm web-design*
    *  http://www.mf2fm.com/rv  *
    * DON'T EDIT BELOW THIS BOX *
    ****************************/
    var rainbow, raintxt, raincnt=0;
    
    function addLoadEvent(funky) {
      var oldonload=window.onload;
      if (typeof(oldonload)!='function') window.onload=funky;
      else window.onload=function() {
        if (oldonload) oldonload();
        funky();
      }
    }
    
    addLoadEvent(regenbogen);
    
    function regenbogen() { if (document.getElementById) {
      var i, rainbeau;
      rainbow=document.getElementById("rainbow_admin");
      raintxt=rainbow.firstChild.nodeValue;
      while (rainbow.childNodes.length) rainbow.removeChild(rainbow.childNodes[0]);
      for (i=0; i<raintxt.length; i++) {
        rainbeau=document.createElement("span");
        rainbeau.setAttribute("id", "rain"+i);
        rainbeau.appendChild(document.createTextNode(raintxt.charAt(i)));
        if (alink) {
          rainbeau.style.cursor="pointer";
          rainbeau.onclick=function() { top.location.href=alink; }
        }
        rainbow.appendChild(rainbeau);
      }
      rainbow=setInterval ("raining()", speed);
    }}
    
    function raining() {
      var i, c;
      for (i=0; i<raintxt.length; i++) {
        c=raincol[(i+raincnt)%raincol.length];
        document.getElementById("rain"+i).style.color=c;	
      }
      raincnt++;
    }
    // ]]>
    </script>
    However, it only does this effect once..

    Example:
    1st "ide" is rainbow..
    the 2nd "ide" is black (no effect)
    the 3rd "ide" is black (no effect)
    the 4th "ide" is black (no effect)
    etc...
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,110
    Rep Power
    119
    Not quit sure how your setting up your HTML, but this is how you would do it:
    Code:
    <span id="rainbow">RAINBOW TEXT</span>
    
    <script type="text/javascript">
    
    // <![CDATA[
    var speed=100; // speed colours change, 1 second = 1000
    var glow=3; // can be set from '0' for no glow, to 10
    var raincol=new Array("#ff0000", "#ff5500", "#ffaa00", "#ffff00", "#aaff00", "#55ff00", "#00ff00", "#00ff55", "#00ffaa", "#00ffff", "#00aaff", "#0055ff", "#0000ff", "#5500ff", "#aa00ff", "#ff00ff", "#ff00aa", "#ff0055"); // change the colours if you want to
    var alink="http://www.mf2fm.com/rv/"; // page to link text to (set to ="" for no link)
    
    /****************************
    *    Rainbow Text Effect    *
    *(c)2003-13 mf2fm web-design*
    *  http://www.mf2fm.com/rv  *
    * DON'T EDIT BELOW THIS BOX *
    ****************************/
    var rainbow, raintxt, raincnt=0;
    
    function addLoadEvent(funky) {
      var oldonload=window.onload;
      if (typeof(oldonload)!='function') window.onload=funky;
      else window.onload=function() {
        if (oldonload) oldonload();
        funky();
      }
    }
    
    addLoadEvent(regenbogen);
    
    function regenbogen() { if (document.getElementById) {
      var i, rainbeau;
      rainbow=document.getElementById("rainbow");
      raintxt=rainbow.firstChild.nodeValue;
      while (rainbow.childNodes.length) rainbow.removeChild(rainbow.childNodes[0]);
      for (i=0; i<raintxt.length; i++) {
        rainbeau=document.createElement("span");
        rainbeau.setAttribute("id", "rain"+i);
        rainbeau.appendChild(document.createTextNode(raintxt.charAt(i)));
        if (alink) {
          rainbeau.style.cursor="pointer";
          rainbeau.onclick=function() { top.location.href=alink; }
        }
        rainbow.appendChild(rainbeau);
      }
      rainbow=setInterval ("raining()", speed);
    }}
    
    function raining() {
      var i, c;
      for (i=0; i<raintxt.length; i++) {
        c=raincol[(i+raincnt)%raincol.length];
        document.getElementById("rain"+i).style.color=c;
    	if (glow) document.getElementById("rain"+i).style.textShadow=c+" 0px 0px "+glow+"px";
      }
      raincnt++;
    }
    // ]]>
    </script>
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    57
    Rep Power
    2
    [QUOTE=web_loone08]Not quit sure how your setting up your HTML, but this is how you would do it:
    Code:
    <span id="rainbow">RAINBOW TEXT</span>
    
    <script type="text/javascript">
    
    // <![CDATA[
    var speed=100; // speed colours change, 1 second = 1000
    var glow=3; // can be set from '0' for no glow, to 10
    var raincol=new Array("#ff0000", "#ff5500", "#ffaa00", "#ffff00", "#aaff00", "#55ff00", "#00ff00", "#00ff55", "#00ffaa", "#00ffff", "#00aaff", "#0055ff", "#0000ff", "#5500ff", "#aa00ff", "#ff00ff", "#ff00aa", "#ff0055"); // change the colours if you want to
    var alink="http://www.mf2fm.com/rv/"; // page to link text to (set to ="" for no link)
    
    /****************************
    *    Rainbow Text Effect    *
    *(c)2003-13 mf2fm web-design*
    *  http://www.mf2fm.com/rv  *
    * DON'T EDIT BELOW THIS BOX *
    ****************************/
    var rainbow, raintxt, raincnt=0;
    
    function addLoadEvent(funky) {
      var oldonload=window.onload;
      if (typeof(oldonload)!='function') window.onload=funky;
      else window.onload=function() {
        if (oldonload) oldonload();
        funky();
      }
    }
    
    addLoadEvent(regenbogen);
    
    function regenbogen() { if (document.getElementById) {
      var i, rainbeau;
      rainbow=document.getElementById("rainbow");
      raintxt=rainbow.firstChild.nodeValue;
      while (rainbow.childNodes.length) rainbow.removeChild(rainbow.childNodes[0]);
      for (i=0; i<raintxt.length; i++) {
        rainbeau=document.createElement("span");
        rainbeau.setAttribute("id", "rain"+i);
        rainbeau.appendChild(document.createTextNode(raintxt.charAt(i)));
        if (alink) {
          rainbeau.style.cursor="pointer";
          rainbeau.onclick=function() { top.location.href=alink; }
        }
        rainbow.appendChild(rainbeau);
      }
      rainbow=setInterval ("raining()", speed);
    }}
    
    function raining() {
      var i, c;
      for (i=0; i<raintxt.length; i++) {
        c=raincol[(i+raincnt)%raincol.length];
        document.getElementById("rain"+i).style.color=c;
    	if (glow) document.getElementById("rain"+i).style.textShadow=c+" 0px 0px "+glow+"px";
      }
      raincnt++;
    }
    // ]]>
    </script>
    [/QUOTE

    No i have to get the "class" rather than the ID. So how can i get the class of rainbow?

    Instead of <span id="rainbow"></span>.. how can i get <span class="rainbow"></span> and it still works
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,110
    Rep Power
    119
    Originally Posted by ide
    No i have to get the "class" rather than the ID. So how can i get the class of rainbow?

    Instead of <span id="rainbow"></span>.. how can i get <span class="rainbow"></span> and it still works
    Yeah, that's probably going to be more difficult, then it's worth; to try to go in and edit that code to work by className. I mean, you may want to take a stab @ it; but that does not seem like it's worth it to me. So, my suggestion would be to go with CSS3 for something; like you are wanting. Here is a link to a tutorial; that shows you How To Create Rainbow Text with CSS3 And/Or jquery.

    Good Luck
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2012
    Location
    Connecticut
    Posts
    3
    Rep Power
    0

    looping around letters with jQuery


    Seems like you're not using jQuery, but since that's what I'm most comfortable using, I mocked a simple solution up

    jsbin[.]com/upoyab/3/edit

    remove the square brackets from the above url

IMN logo majestic logo threadwatch logo seochat tools logo