Text Just Fads Into View

[Total: 0    Average: 0/5]

This script allows you to create text fading effect without the use of FLASH or JAVA. You can define the starting and ending colors, so you can have fade-in or fade-out effect on any background. You can also control the speed of transition.

Body Code:

<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Hide from old browsers that do not support JavaScript.
// Feel free to copy and modify this script, but please keep the comment/credit lines!
////////////////////////////////////////////////////////////////////////////////
// Hamid F. Fard    PetaNet Information Technology     http://www.petanet.com //
////////////////////////////////////////////////////////////////////////////////
// Function:    Fade-in text by gradual transition from one color to another. //
// Application: To create the smooth Text fade-in or fade-out effect to/from  //
//              any shade of Gray or other colors without using FLASH or JAVA.//
//              If you want the text to automatically fade-in/out when loaded-//
//                 put OnLoad="fadeintext();" inside the 'body' tag.          //
////////////////////////////////////////////////////////////////////////////////

// You may change the following parameters to define the Starting and Ending colors.
// When the Starting color matches your background, you will have a Fade-in  effect.
// When the Ending   color matches your background, you will have a Fade-out effect.

var StrtValR = 0xFF;  //Initial HEX value for color RED   to start from
var StrtValG = 0xFF;  //Initial HEX value for color GREEN to start from
var StrtValB = 0xFF;  //Initial HEX value for color BLUE  to start from
  //For Fade-in, the combination of the above 3 should be the color of your background, e.g. White is all 0xFF

var StopValR = 0x33;  //Final HEX value for RED   to create the fade-in to color
var StopValG = 0x77;  //Final HEX value for GREEN to create the fade-in to color
var StopValB = 0xEE;  //Final HEX value for BLUE  to create the fade-in to color 
  //For Fade-in, the combination of the above 3 should be the final color to fade to.
  //Equal numbers create a shade of Gray (0 for Black).

var Speed = 100      //Timeout in Millisecond, Decrease this value for Faster Fading.

// No need to edit Bellow this line
////////////////////////////////////////////////////////////////////////////////

if (StrtValR > StopValR) StepR = -4;  //To move this color from Light to Dark
   else                  StepR =  4;  //To move this color from Dark to Light
if (StrtValG > StopValG) StepG = -4;  //To move this color from Light to Dark
   else                  StepG =  4;  //To move this color from Dark to Light
if (StrtValB > StopValB) StepB = -4;  //To move this color from Light to Dark
   else                  StepB =  4;  //To move this color from Dark to Light
var WorkValR = StrtValR;
var WorkValG = StrtValG;
var WorkValB = StrtValB;
var GoOn = true;
function fadeintext(){ 
  GoOn = false;
  if (WorkValR > StopValR && StepR < 0  || //If RED   color components have not yet reached darkest or
      WorkValR < StopValR && StepR > 0) {  //If RED   color components have not yet reached lightest
     WorkValR += StepR;       //increase/decrease  color darkness
     GoOn = true;
  }
  if (WorkValG > StopValG && StepG < 0  || //If GREEN color components have not yet reached darkest or
      WorkValG < StopValG && StepG > 0) {  //If GREEN color components have not yet reached lightest
     WorkValG += StepG;       //increase/decrease  color darkness
     GoOn = true;
  }
  if (WorkValB > StopValB && StepB < 0  || //If BLUE  color components have not yet reached darkest or
      WorkValB < StopValB && StepB > 0) {  //If BLUE  color components have not yet reached lightest
     WorkValB += StepB;       //increase/decrease  color darkness
     GoOn = true;
  }
  if (GoOn) {
     document.getElementById("div1").style.color="rgb("+WorkValR+","+WorkValG+","+WorkValB+")";
     setTimeout("fadeintext()",Speed);
  }
  else {
     WorkValR = StrtValR;  //reset the RED   initial value
     WorkValG = StrtValG;  //reset the GREEN initial value   
     WorkValB = StrtValB;  //reset the BLUE  initial value
  }
}

// End hiding -->
</SCRIPT>

<CENTER>
<BR>
<div id="div1">
 <h3>This line slowly fades into view</h3>
</div>
<button onClick="fadeintext()">Fade-in Text</button>
</CENTER>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *