Maybe you've ever seen a website with a scrolling title on the browser title bar, this text effect is quite interesting. In this post, I will also try to make it. You can see the result by clicking the button on the right:
Here is the script. You may put this between <head> and </head> or between <body> and </body>.
<script language="JavaScript"> var msg = "Welcome to Shoutwhisper.com"; var limiter = "---"; var delay = 2000; //in millisecond var speed = 200; //in millisecond var ipos = -1; function scroll_your_title(startdelay){ if (ipos==-1){ limiter += " "; if (msg=="") { msg = document.title + " "; }else { msg += " "; document.title = msg; } ipos++; if (startdelay) setTimeout('scroll_your_title(0)', delay) else setTimeout('scroll_your_title(0)', 0); }else { var s = msg + limiter; if ( (ipos + msg.length) > s.length){ if (ipos > s.length){ ipos=0; setTimeout('scroll_your_title(0)', delay); }else{ document.title = s.substr(ipos, msg.length) + s.substr(0, ipos + msg.length - s.length); ipos++; setTimeout('scroll_your_title(0)', speed); } }else{ document.title = s.substr(ipos, msg.length); ipos++; setTimeout('scroll_your_title(0)', speed); } } } </script> |
The red text in codes above can be changed at your will.
Note:
- Variable msg is the text containing message to be displayed on title bar. If you want to use the existing title, just clear it.
- Variable delay is the time interval between one cycle to next cycle.
- Variable speed is the time interval of text movement.
Next, in order this effect can run, we must add the onload event in body tag :
<body onload="scroll_your_title(true);">
|
Notice the red text, if you want this effect started with delay, then use true as seen above, if not, just use false.
I've tried this script on firefox, IE, opera, and chrome, and all run well.
Hopefully useful for you.
No comments:
Post a Comment