How does JavaScript slide fade marquee work?Here is an example of JavaScript slide fade marquee in working:
Download the JavaScript slide fade marquee script here: slideandfade.js |
How to implement the JavaScript slide fade marquee?First add a reference to the JavaScript in the head of the HTML page, for example:
<SCRIPT SRC="http://www.yoursite.com/slideandfade.js" TYPE="text/javascript"> </SCRIPT>
Next, place a div placeholder on the page with id "fader", for example:
<DIV ID="fader" STYLE="text-align:left;"></DIV>
Place the following either as inline JavaScript or on the body's ONLOAD, as follow:
<SCRIPT TYPE="text/javascript">
fadeandscroll('Your text', '#676F77', '#DFF5FF', 40, 70, 250, 10);
</SCRIPT>
|
What does the parameters for the function mean?
The parameters for the function "fadeandscroll" mean the following:
fadeandscroll(txt,color1,color2,numsteps,fademilli,containerwidth,scrollmilli)
txt | The text that should be user for fading. |
color1 | The text fades from one color to another. The text fades from this color. |
color2 | The text fades from one color to another. The text fades to this color. |
numsteps | This parameter specifies the number of steps in which the color should fade from the first specified color, to the second specified color. |
fademilli | The time in milliseconds before the next color step should take place. |
containerwidth | The width in pixels of the region in which the text should slide and fade. |
scrollmilli | The time in milliseconds before the text is moved again. The speed of the sliding text can be set using this parameter. |
|
Is this the only way of making text slide?This JavaScript slide fade text script has the same effect as a HTML marquee with SLIDE behavior. Have a look at this article that discusses the HTML marquee. |
What browser compatibility issues might exist?The script was written using getElementById. Thus if the browser doesn't support this function, the script will not work. This script was tested using Internet Explorer 6 and FireFox version 1.0.6. |