Metachecker.net
|
FontsMadeEasy.com
|
RankChecker.net
Learn Java Script Today
|
Over 5000 Free Fonts
|
Tutorials
|
Javascript Forum
|
Other Javascript Resources
|
Cheat Sheet
JavaScript Basics
Inserting Javascript
Complete Tutorial
Advance DHTML Tutorial
Script archive
Advanced Tutorials
Alert Scripts
Animation
Audio
Background Effects
Banner Ads
Browser Window
Buttons
Button Forms
Calculcators
Calendars
Clocks & Dates
Cookies
Cursor Effects
DHMTL Games
DHTML Miscellaneous
Equivalents
Forms
Games
IE4+ Scripts
IE5+ Scripts
Image Effects
Image Miscellaneous
Links & Buttons
Math Related
Messages Miscellaneous
Miscellaneous
Mouse Tricks
Navigation
Page Details
Password Protection
Pulldown Menus
Random Stuff
Scrolling
Status Bar
Text Animation
User Detail
User Info
Window Control
Animated Text
[View Sample]
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.
Insert into <HEAD>
Insert into <BODY>
<script language="JavaScript"> function doCheckDHTMLcapable() { 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] = new String("sprite"); document.MM_Time[0][0].slot = 1; // The above line handles alternate syntax needed by Netscape and Explorer document.MM_Time[0][0].obj = (ns) ? document.animatedText : document.all["animatedText"]; document.MM_Time[0][0].keyFrames = new Array(1, 15); document.MM_Time[0][0].values = new Array(2); // The line below holds the horizontal positions for each move document.MM_Time[0][0].values[0] = new Array(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"> function MM_timelinePlay(tmLnName, myID) { //v1.0 //Copyright 1997 Macromedia, Inc. All rights reserved. var i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,propNum,theObj,firstTime=false; if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st time tmLn = document.MM_Time[tmLnName]; if (myID == null) { myID = ++tmLn.ID; firstTime=true;}//if new call, incr ID if (myID == tmLn.ID) { //if Im newest setTimeout('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]; else sprite.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]; else sprite.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> </head> <body bgcolor="#ffe4c4" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000" onload="doCheckDHTMLcapable()"> <center><h1>Animated Text</h1></center> <p>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.</p> <p>This example uses the default scripts generated by <a href="http://www.macromedia.com/dreamweaver/">Macromedia Dreamweaver</a>, an excellent product but rather too expensive for my means. Netscape Navigator 2.x doesn't understand the new Array command (introduced in JavaScript 1.1), so it displays an error message. Otherwise the page functions fine.</p> <table border="1" width="200" cellspacing="0" cellpadding="0"> <tr><td width="200" height="50" align="LEFT" valign="TOP"> <span id="animatedText" style="position:relative; width:200px; height:50px; z-index:1; left:310px; top:0">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 width="200" height="50" align="LEFT" valign="TOP"> <span id="regularText" style="position:relative; width:200px; height:50px; z-index:2; left:0; top:0">Notice how the text above aligns with the (nonanimated) text down here, regardless of what browser you're using.</span></td> </tr></table>
Other Options