« »

Text Animator is a great cross-browser text effect. It fades in and out infinite text messages, with each message optionally being clickable. The only shortcoming of this JavaScript is that it has to be absolutely positioned on your page, meaning you have to manually set the coordinates of exactly where you wish the animator to appear on the page. A small sacrifice to make in return for such a cool effect...

Label: Text Animator

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

Code
CSS
JavaScript
HTML
Print

Copy All x2

<style type="text/css">
<!-- 
.textanimlink,a {
text-decoration : none;
}
P.main {
	font-family : Arial;
	font-size : 15pt;
	font-weight : bold;
}
-->
</style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<Script Language="Javascript">
<!-- Hiding

/*
Script created by Lefteris Haritou
(lef@the.forthnet.gr)
Permission granted to Dynamicdrive.com to feature the script
For more DHTML scripts, visit Dynamicdrive.com
*/

bname=navigator.appName;
bversion=parseInt(navigator.appVersion)
if ((bname=="Netscape" && bversion>=4) || (bname=="Microsoft Internet Explorer" && bversion>=4))
window.onload=start
else
stop();
window.onunload=stop
if (bname=="Netscape"){
brows=true
dt=2
}
else{
brows=false
dt=20
}
var z=0;
var msg=0;
var rgb=0;
var link=false;
var status=true;
var updwn=false;
var message= new Array();
var value=0;
var h=window.innerHeight;
var w=window.innerWidth;
var timer1;
var timer2;
var timer3;
var convert = new Array()
var hexbase= new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");

// Put here your own messages. Add as many as you wan't (Do not edit anything else in the Script except the lines below)

var bgcolor="#FFFFFF"; //Color of background
var color="#00008D";  //Color of the Letters

message[0]='The future of JavaScript'
message[1]='Today.'
message[2]='JavaScriptBank.com'
message[3]='<a href="http://JavaScriptBank.com">Bank of over 2000+ free JavaScripts</a>'

// Put here your own messages. Add as many as you wan't (Do not edit anything else in the Script except the lines above)

for (x=0; x<16; x++){
for (y=0; y<16; y++){
convert[value]= hexbase[x] + hexbase[y];
value++;
}
}

redx=color.substring(1,3);
greenx=color.substring(3,5);
bluex=color.substring(5,7);
hred=eval(parseInt(redx,16));
hgreen=eval(parseInt(greenx,16));
hblue=eval(parseInt(bluex,16));
eredx=bgcolor.substring(1,3);
egreenx=bgcolor.substring(3,5);
ebluex=bgcolor.substring(5,7);
ered=eval(parseInt(eredx,16));
egreen=eval(parseInt(egreenx,16));
eblue=eval(parseInt(ebluex,16));
red=ered;
green=egreen;
blue=eblue;

function start(){
if ((bname=="Netscape" && bversion>=4) || (bname=="Microsoft Internet Explorer" && bversion>=4)){
link=false;
updwn=true;
if (brows)
res=document.layers['textanim'].top
else{
textanim.style.width=document.body.offsetWidth-20;
textanim.innerHTML='<Pre><P Class="main" Align="Center">'+message[msg]+'</P></Pre>'
res=textanim.style.top
for (x=0; x<document.all.length; x++)
if(document.all[x].id=="textanimlink")
link=true;
}
up()
}
}

function stop(){
clearTimeout(timer1);
clearTimeout(timer2);
clearTimeout(timer3);
}

function resz(){
h=window.innerHeight;
w=window.innerWidth;
if (updwn)
timer1=setTimeout('up()',1000)
else
timer2=setTimeout('down()',1000)
}

function breakf(){
if (status){
clearTimeout(timer1);
clearTimeout(timer2);
status=false
return;
}
else{
status=true;
if (updwn)
timer1=setTimeout('up()',dt)
else
timer2=setTimeout('down()',dt)
}
}


function up(){
if (red<hred){
if ((red+7)<hred)
red+=7;
else
red=hred
redx = convert[red]
}
else{
if ((red-7)>hred)
red-=7;
else
red=hred
redx = convert[red]
}

if (green<hgreen){
if ((green+7)<hgreen)
green+=7;
else
green=hgreen
greenx = convert[green]
}
else{
if ((green-7)>hgreen)
green-=7;
else
green=hgreen
greenx = convert[green]
}

if (blue<hblue){
if ((blue+7)<hblue)
blue+=7;
else
blue=hblue
bluex = convert[blue]
}
else{
if ((blue-7)>hblue)
blue-=7;
else
blue=hblue
bluex = convert[blue]
}

rgb = "#"+redx+greenx+bluex;
if (brows){
document.layers['textanim'].document.linkColor=rgb;
document.layers['textanim'].document.vlinkColor=rgb;
if (window.innerHeight!=h || window.innerWidth!=w){
clearTimeout(timer1);
resz()
return;
}
else{
document.layers['textanim'].document.write('<Pre><P Class="main" Align="Center"><font color="'+rgb+'">'+message[msg]+'</font></P></Pre>')
document.layers['textanim'].document.close();
}
}
else{
textanim.style.color=rgb;
if(link)
textanimlink.style.color=rgb;
}
if (z<38){
if (brows)
document.layers['textanim'].top--
else
textanim.style.posTop--
z++
timer1=setTimeout('up()',dt)
}
else
{
updwn=false;
down()
}
}


function down(){
if (red<ered){
if ((red+7)<ered)
red+=7;
else
red=ered
redx = convert[red]
}
else{
if ((red-7)>ered)
red-=7;
else
red=ered
redx = convert[red]
}

if (green<egreen){
if ((green+7)<egreen)
green+=7;
else
green=egreen
greenx = convert[green]
}
else{
if ((green-7)>egreen)
green-=7;
else
green=egreen
greenx = convert[green]
}

if (blue<eblue){
if ((blue+7)<eblue)
blue+=7;
else
blue=eblue
bluex = convert[blue]
}
else{
if ((blue-7)>eblue)
blue-=7;
else
blue=eblue
bluex = convert[blue]
}

rgb = "#"+redx+greenx+bluex;
if (brows){
document.layers['textanim'].document.linkColor=rgb;
document.layers['textanim'].document.vlinkColor=rgb;
if (window.innerHeight!=h || window.innerWidth!=w){
clearTimeout(timer2);
resz()
return;
}
else{
document.layers['textanim'].document.write('<Pre><P Class="main" Align="Center"><font color="'+rgb+'">'+message[msg]+'</font></P></Pre>')
document.layers['textanim'].document.close();
}
}
else{
textanim.style.color=rgb;
if(link)
textanimlink.style.color=rgb;
}

if (z<76){
if (brows)
document.layers['textanim'].top--
else
textanim.style.posTop--
z++
timer2=setTimeout('down()',dt)
}
else
{
if (brows){
document.layers['textanim'].document.write('')
document.layers['textanim'].document.close();
}
else
textanim.innerHTML='';
window.clearInterval(timer2);
if(msg<message.length-1){
msg++;
z=0;
if (brows){
document.layers['textanim'].top=res;
}
else
textanim.style.top=res;
timer3=setTimeout('start()',100);
}
else
{
msg=0;
z=0;
if (brows)
document.layers['textanim'].top=res;
else
textanim.style.top=res;
timer3=setTimeout('start()',2000);
}
}
}


// done hiding -->
</Script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<b>Click it to Continue/Pause</b>
	<Div id="textanim" style="position: relative; left: 0; top: 0" onclick="breakf()"></Div>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Comment (4)
Write

by NguyenKhoa, 20/09/2010 01:09 AM
DÃ²ng chá»¯ cháº¡y lÃªn trÃªn Reply

Báº¡n cÃ³ code nÃ o cho chá»¯ cháº¡y (trá»“i) lÃªn trÃªn, Ä‘iá»u chá»‰nh Ä‘Æ°á»£c thá»i gian dá»«ng láº¡i cá»§a dÃ²ng chá»¯, sau khoáº£n thá»i gian xÃ¡c Ä‘á»‹nh thÃ¬ dÃ²ng chá»¯ khÃ¡c trá»“i lÃªn.
Náº¿u cÃ³ cho mÃ¬nh xin vá»›i.
Cáº£m Æ¡n!

by Cao Phong, 20/09/2010 07:09 AM
@ NguyenKhoa Reply

Ä‘Æ¡n giáº£n chá»‰ cáº§n dÃ¹ng tháº» MARQUEE (káº¿t há»£p vá»›i cÃ¡c thuá»™c tÃnh) lÃ Ä‘á»§ rá»“i báº¡n Æ¡i

vÃ Ä‘á»ƒ cÃ³ thá»ƒ tÃ¬m kiáº¿m nhanh hÆ¡n, báº¡n hÃ£y tÃ¬m trong khu vá»±c <b>TÆ°Æ¡ng tá»±</b> phÃa bÃªn pháº£i, sáº½ cÃ³ nhiá»u script phÃ¹ há»£p

by NguyenKhoa, 20/09/2010 01:09 PM
Reply

Cao Phong cho mÃ¬nh xin Ä‘oáº¡n code dÃ¹ng tháº» marquee cÃ³ káº¿t há»£p cÃ¡c thuá»™c tÃnh sao cho giá»‘ng Ä‘oáº¡n js nÃ y ko?
http://www.javascriptbank.com/vertical-marquee.html

DÃ¹ng tháº» marquee thuáºn tiá»‡n vá»›i nhá»¯ng ngÆ°á»i Ãt hiá»ƒu vá» code nhÆ° mÃ¬nh hÆ¡n.
Cáº£m Æ¡n báº¡n!

by Cao Phong, 20/09/2010 02:09 PM
cÃ¡i báº¡n Ä‘á» nghá»‹ lÃ má»™t sá»± lá»±a chá»n tá»‘t @ NguyenKhoa Reply

bá»Ÿi hiá»‡u á»©ng cá»§a nÃ³ trÃ´ng háº¥p dáº«n hÆ¡n nhiá»u, náº¿u báº¡n chá»‰ cáº§n sá»± Ä‘Æ¡n giáº£n thÃ¬ dÃ¹ng thá» cÃ¡i nÃ y <url="http://www.javascriptbank.com/simple-marquee.html">Hiá»ƒn thá»‹ tin tá»©c báº±ng Marquee</url>

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (2)
New

BBCode
HTML
URL
JID

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz.com, chatGPT4.win, chatGPT2.fun, re-chatGPT.com
Talk to ChatGPT by your mother language

Dall-E-OpenAI.com
Generate creative images automatically with AI

AIVideo-App.com
Render creative video automatically with AI

Cool Domains for Sale!

YeuNu.com CreditCard.rip XMQV.com ApexBTC.com ChatTotal.com war.money index.services choose.exchange ZWVQ.com this.bid CTRCoin.com system.money CryptoKD.com pornID.net choose.works Card.rip ChainTutor.com CoinHolo.com eChainBank.com ABP3.com

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

30/01/2007
Lefteris Haritou [more]
5,776
4
10
2
7.8 KBytes

JavaScript Text Animator

2.2/5 10 votes / 5,776 previews / 4 comment 30/01/2007 Text Animator is a great cross-browser text effect. It fades in and out infinite text messages, with each ...JavaScript Text Animator - Text Animator

Cao Phong[5] dinhdl JennyPham88 phamtrungtri trieutuannghia dobaman thombt namsinhquay[5]