whadiz.com: What is?
Search Articles:     Home | About | Tools | Contact Us
Board Games
Online Games
Sql Server
Visual C# in ASP.Net
Web Design

Clever Facts Section

JavaScript slide fade marquee | JavaScript text scroll and fade script | JavaScript slide marquee scroll and fade text at the same time

What is JavaScript slide fade marquee?

JavaScript slide fade marquee is a JavaScript script that makes specified text scroll from right to left, stopping as soon as it hits the side, and making the text fade from one color to another at the same time. 

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">

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);

What does the parameters for the function mean?

The parameters for the function "fadeandscroll" mean the following:


txtThe text that should be user for fading.
color1The text fades from one color to another. The text fades from this color.
color2The text fades from one color to another. The text fades to this color.
numstepsThis parameter specifies the number of steps in which the color should fade from the first specified color, to the second specified color.
fademilliThe time in milliseconds before the next color step should take place.
containerwidthThe width in pixels of the region in which the text should slide and fade.
scrollmilliThe 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.

Link to this article:

Browse some more: Next Article | Next Fact | More JavaScript Articles | More Clever Facts

Copyright © 2022 whadiz.com. All rights reserved.
whadiz.com: JavaScript slide fade marquee | JavaScript text scroll and fade script
Home of the answer "what is"