Full version: jsB@nk » Text » Animation » Animated Text
URL: https://www.javascriptbank.com/animated-text.html
This page shows how to add DHTML animation to a page in a way that's compatible with older browsers, and works in both Netscape and Internet Explorer versions 4.x.
Full version: jsB@nk » Text » Animation » Animated Text
URL: https://www.javascriptbank.com/animated-text.html
<SCRIPT language=JavaScript>functiondoCheckDHTMLcapable() {browserName = navigator.appName;browserVersion = parseInt(navigator.appVersion);if(browserName == "Netscape" && browserVersion >=4) {MM_timelinePlay('Timeline1') // If it's NS 4+, run the animation}else;if (browserName == "Microsoft Internet Explorer" &&browserVersion >=4) {MM_timelinePlay('Timeline1') // If it's IE 4+, run the animation}else;// otherwise don't run the animation}</SCRIPT><!-- This script holds the positioning info of the elements throughout the animation --><SCRIPT language=JavaScript>function MM_initTimelines() {//MM_initTimelines() Copyright 1997 Macromedia, Inc. All rights reserved.var ns = navigator.appName == "Netscape"; // set up check used to customize syntax document.MM_Time = new Array(1);document.MM_Time[0] = new Array(1); document.MM_Time["Timeline1"] =document.MM_Time[0]; document.MM_Time[0].MM_Name = "Timeline1";document.MM_Time[0].fps = 15; document.MM_Time[0][0] = newString("sprite"); document.MM_Time[0][0].slot = 1; // The above line handles alternate syntax needed by Netscape and Explorerdocument.MM_Time[0][0].obj = (ns) ? document.animatedText :document.all["animatedText"]; document.MM_Time[0][0].keyFrames = newArray(1, 15); document.MM_Time[0][0].values = new Array(2); // The line below holds the horizontal positions for each movedocument.MM_Time[0][0].values[0] = newArray(300,279,257,236,214,193,171,150,129,107,86,64,43,21,0);document.MM_Time[0][0].values[0].prop = "left"; // The line below holds the vertical positions for each move document.MM_Time[0][0].values[1] =new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);document.MM_Time[0][0].values[1].prop = "top"; // The lines below handle alternate syntax needed by Explorer and Netscape if (!ns) {document.MM_Time[0][0].values[0].prop2 = "style";document.MM_Time[0][0].values[1].prop2 = "style"; }document.MM_Time[0].lastFrame = 15; for (i=0;i<document.MM_Time.length; i++) { document.MM_Time[i].ID = null;document.MM_Time[i].curFrame = 0; document.MM_Time[i].delay =1000/document.MM_Time[i].fps; }}</SCRIPT><!-- This sets up the autoplay --><SCRIPT language=JavaScript>functionMM_timelinePlay(tmLnName, myID) { //v1.0 //Copyright 1997 Macromedia, Inc. All rights reserved. vari,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,propNum,theObj,firstTime=false; if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st timetmLn = document.MM_Time[tmLnName]; if (myID == null) { myID = ++tmLn.ID;firstTime=true;}//if new call, incr ID if (myID == tmLn.ID) { //if Im newestsetTimeout('MM_timelinePlay("'+tmLnName+'",'+myID+')',tmLn.delay); fNew= ++tmLn.curFrame; for (i=0; i<tmLn.length; i++) { sprite =tmLn[i]; if (sprite.charAt(0) == 's') { if (sprite.obj) {numKeyFr = sprite.keyFrames.length; firstKeyFr = sprite.keyFrames[0];if (fNew >= firstKeyFr && fNew <= sprite.keyFrames[numKeyFr-1]) {//in range keyFrm=1; for (j=0; j<sprite.values.length;j++) { props = sprite.values[j]; if (numKeyFr!= props.length) { if (props.prop2 == null)sprite.obj[props.prop] = props[fNew-firstKeyFr]; elsesprite.obj[props.prop2][props.prop] = props[fNew-firstKeyFr];} else { while (keyFrm<numKeyFr &&fNew>=sprite.keyFrames[keyFrm]) keyFrm++; if (firstTime ||fNew==sprite.keyFrames[keyFrm-1]) { if (props.prop2 ==null) sprite.obj[props.prop] = props[keyFrm-1]; elsesprite.obj[props.prop2][props.prop] = props[keyFrm-1]; } } } } }} else if (sprite.charAt(0)=='b' && fNew == sprite.frame)eval(sprite.value); if (fNew > tmLn.lastFrame) tmLn.ID = 0;} }}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onload=doCheckDHTMLcapable()><TABLE cellSpacing=0 cellPadding=0 width=200 border=1> <TBODY> <TR> <TD vAlign=top align=left width=200 height=50><SPAN id=animatedText style="Z-INDEX: 1; LEFT: 310px; WIDTH: 200px; POSITION: relative; TOP: 0px; HEIGHT: 50px">If you're on a 4.0 browser, you'll see animated flying text. If you're on a 3.0 browser, this text will be static.</SPAN></TD></TR> <TR> <TD vAlign=top align=left width=200 height=50><SPAN id=regularText style="Z-INDEX: 2; LEFT: 0px; WIDTH: 200px; POSITION: relative; TOP: 0px; HEIGHT: 50px">Notice how the text above aligns with the (nonanimated) text down here, regardless of what browser you're using.</SPAN></TD></TR></TBODY></TABLE></BODY><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->