BB Code Enhancements - Text Fade (Rainbow Faded Text) BBCode

This BB Code produces a rainbow like text fade effect. It uses Javascript to put multiple html font color tags between characters. There are two ways of doing this, the first method uses an external javascript file. In the second post you add the javascript to every page via the header template instead, this may be better if you expect the rainbow text to be called many times on a single page.

Demo: here.

Screen Shot:



1. Download the attached textfade.js.txt file, rename it to textfade.js, and upload it to your forums/clientscript folder.

2. Add a new BBCode

Title: Text Fade
BB Code Tag Name: fade
Replacement:

<script type="text/javascript" src="/forums/clientscript/textfade.js"></script> 
<script>fadeText("{param}");</script>

*Adjust the path to the textfade.js file as necessary. For example if your forum is installed in the web root (www.my-domain.com/) instead of (www.my-domain.com/forums/) then your path would simply be src="/clientscript/textfade.js"

Example: [fade]This code fades text in a rainbow.[/fade]
Description: This uses javascript to make a smooth rainbow effect in text.
Use Option: No
Button Image: (optional)
Remove Tag If Empty: Yes
All Disable Options: Yes except disable word wrapping: No

Limitations:

• You can not use other bbcode within this bbcode, but you can use it OUTSIDE of this bbcode to change the font style/color/type etc...
• You can't use smilies within this bbcode.
• You can't use the double quote (") within this bbcode.

This BB Code was made for vB 3.8 but should work on all current versions.

Please mark as installed if you use this.

[BirdOPrey5]

Alternate Method- no external file.

1. In Style Manager -> All Style Options edit the headinclude Template for each style
At the bottom add:

<script type="text/javascript">
function makeHex()
{
  this.length = 16;
     this[1]  = "0";
     this[2]  = "1";
     this[3]  = "2";
     this[4]  = "3";
     this[5]  = "4";
     this[6]  = "5";
     this[7]  = "6";
     this[8]  = "7";
     this[9]  = "8";
     this[10] = "9";
     this[11] = "A";
     this[12] = "B";
     this[13] = "C";
     this[14] = "D";
     this[15] = "E";
     this[16] = "F";
     return this;
}
newHex = new makeHex();

function con2hex (x)
{
     if( x < 17)
          x = 16;
     var top = (x / 16);
     var sub = top + '';
     sub = sub.substring (0, 2);
     top = parseInt (sub, 10);
     var before = newHex[top + 1];
     var bot = x - top * 16;
     if (bot < 1)
        bot = 1;
     sub = bot + '';
     sub = sub.substring (0, 2);
     bot = parseInt (sub, 10);
     var after = newHex[bot + 1];
     var thestring = before + '' + after;
     return thestring;
}

  function fadeText (intext)
{
     intext = intext.substring (0, intext.length);
     colorx = 255;
     z = colorx / intext.length;
     for (var i = 0; i < intext.length; i++)
     {
        colorx = 255 * Math.sin (i / (intext.length / 3));
        colory = con2hex (colorx);
        colorz = z * i;
        colorw = con2hex(colorz);
        k = intext.length;
        j = k - i;
        if(j < 0)
           j = 0;
        coloru = z * j;
        colorv = con2hex(coloru);
        document.write("<font color=\"#" + colorv + colory + colorw + "\">" + intext.substring(i, i + 1) + "</font>")
     }
}
</script>

2.Add a new BBCode

Title: Text Fade
BB Code Tag Name: fade
Replacement:

<script>fadeText("{param}");</script>

Example: [fade]This code fades text in a rainbow.[/fade]
Note- the example won't work in Admin CP because the standard header is not loaded, but it will work in your forum.

Description: This uses javascript to make a smooth rainbow effect in text.
Use Option: No
Button Image: (optional)
Remove Tag If Empty: Yes
All Disable Options: Yes except disable word wrapping: No

All the same limitations as the original method in the top post apply.

[sulasno]

tagged and thanks

[BirdOPrey5]

If you want the rainbow to fade the other direction (VIBGTOR instead of ROYGBIV) then change the line near the bottom from:

 document.write("<font color=\"#" + colorv + colory + colorw + "\">" + intext.substring(i, i + 1) + "</font>")

to

 document.write("<font color=\"#" + colorw + colory + colorv + "\">" + intext.substring(i, i + 1) + "</font>")

[BirdOPrey5]

Someone has expanded this mod to work in Usernames, if you are interested please see here:
https://vborg.vbsupport.ru/showthread.php?t=251286