RV's free DHTML and JavaScript text and graphic scripts :: Right/Left Write Flying Edge Text

RIGHT (OR LEFT) WRITE TEXT
This script has been tested on and shown to work with Internet Explorer 5+, Netscape 6+, Firefox 1.0 and Opera 7+.
17-Oct-2005: Internet Explorer 4 support removed and updated for XML compatibility.
STEP 1: Copy and paste the code below so that it sits between the <head> and </head> tags at the top of your web-page: <script type="text/javascript"> // <![CDATA[ var speed=40; // speed of animation, lower is faster var interval=1; // seconds between entry of each letter var direction="right"; // set to "left" for text to appear from left /**************************\ Right Write Text Effect * * (c)2003-6 mf2fm web-design* * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * \**************************/ var rwtxt, swide, shigh; var rwlft=new Array(); window.onload=function() { if (document.getElementById) { set_width(); var rwli=""; var rwrit=document.getElementById("rightwrite"); rwrit.style.position="relative"; rwtxt=rwrit.firstChild.nodeValue; while (rwrit.childNodes.length) rwrit.removeChild(rwrit.childNodes[0]); for (var i=0; i<rwtxt.length; i++) { rwli=document.createElement("span"); rwli.setAttribute("id", "rwr"+i); rwli.style.position="relative"; rwli.style.visibility="hidden"; rwli.appendChild(document.createTextNode(rwtxt.charAt(i))); rwrit.appendChild(rwli); } for (var i=0; i<rwtxt.length; i++) if (rwtxt.charAt(i)!=" ") { rwli=document.getElementById("rwr"+i); rwlft[i]=(direction=="right")?swide-getPageLeft(rwli):-getPageLeft(rwli); setTimeout("fly_me("+i+")", 1000interval((direction=="right")?i:rwtxt.length-i)); } }} function getPageLeft(el) { var x=0; do { x+=el.offsetLeft } while ((el=el.offsetParent)!=null) ; return x; } function set_width() { if (typeof(self.innerWidth)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } } function fly_me(let) { var rwme=document.getElementById("rwr"+let); if (rwme.style.visibility=="hidden") rwme.style.visibility="visible"; if (Math.abs(rwlft[let])>0.5) { rwme.style.left=Math.floor(rwlft[let])+"px"; rwlft[let]+=(direction=="left")?1:-1; rwlft[let]=0.98; setTimeout("fly_me("+let+")", speed); } else rwme.style.left="0px"; } // ]]> </script> CLICK HERE to select all the above text
STEP 2: Place a <div> element with ' id="rightwrite" ' on your web-page containing the text you wish to be animated. For example: Don't include anything other than text between the <div> tags.
THAT'S IT When your page loads, the text you placed between between the <div> tags should appear from the right (or the left), like the text at the top of this page.
No menu on the left? Click here for a full list of all the free DHTML and Javascript effects you could be using on your web-site!

Link directly to this page: http://www.mf2fm.com/rv/dhtmlrightwrite.php

This page viewed 428 times. Last viewed Thu 17 May, 2012 at 14:50