Right/Left Write Flying Floating Edge Text Javascript Effect from RV

RIGHT (OR LEFT) WRITE TEXT

This script has been tested on and shown to work with the following browsers: Internet Explorer version 5 and above Google Chrome version 1 and above Mozilla Firefox version 1 and above Apple Safari version 3 and above Opera version 7 and above (including Opera mobile) Android Browser version 3 and above

28-Apr-2016: Minor changes. 31-Aug-2015: New onload handler and minor improvements. 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=25; // speed of animation, lower is faster var interval=0.25; // seconds between entry of each letter var direction="right"; // set to "left" for text to appear from left /**************************\ Right Write Text Effect * (c)2003-16 mf2fm web-design * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * \**************************/ var swide, shigh; var rwlft=new Array(); if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) { var oldonload=window.onload; if (typeof(oldonload)!='function') window.onload=funky; else window.onload=function() { if (oldonload) oldonload(); funky(); } } addRVLoadEvent(rightwrite); function rightwrite() { if (document.getElementById) { var i, rwli, rwtxt, rwrit; set_width(); rwrit=document.getElementById("rightwrite"); rwrit.style.position="relative"; rwtxt=rwrit.firstChild.nodeValue; while (rwrit.childNodes.length) rwrit.removeChild(rwrit.childNodes[0]); for (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 (i=0; i<rwtxt.length; 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; } window.onresize=set_width; function set_width() { var sw_min=999999; var sh_min=999999; if (document.documentElement && document.documentElement.clientWidth) { if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth; if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight; } else if (typeof(self.innerWidth)=='number' && self.innerWidth) { if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth; if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight; } else if (document.body.clientWidth) { if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth; if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight; } if (sw_min==999999 \|\| sh_min==999999) { sw_min=800; sh_min=600; } swide=sw_min; shigh=sh_min; } 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.

Copyright notice: All scripts are © copyright mf2fm.com. You can use them wherever and whenever you wish, however the copyright notice at the start of the script should remain intact and a link back to this page would be appreciated. The address for this page is: http://www.mf2fm.com/rv/dhtmlrightwrite.php.

This page has been viewed 223 times. It was last viewed on Sat 21 Dec, 2024 at 10:08