Free rolling text effect from RV's DHTML and JavaScript scripts

ROLLING TEXT EFFECT

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 2 and above

17-Sep-2014: First release.
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 text=Array("This is the ROLLING TEXT EFFECT", "Brought to you by the funky folks at www.mf2fm.com/rv", "Did you note how the web-address was turned into a hyperlink?", "Another free effect "+String.fromCharCode(169)+"2014 onwards RV's free DHTML effects", "Check back from time to time to get the latest sexy scripts...", "...free to use on your web-site or blog. How good is that?"); // replace this with an array of your own text var delay=10; // seconds between each new text item var speed=50; // speed of the scroll /**************************\ Rolling Text Effect * * (c)2014+ mf2fm web-design * * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * \**************************/ var diddly=new Array(); var rolltop; var referee=0; delay=1000; 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(prepare_to_go); function prepare_to_go() { var i, r; var r=document.getElementById("rolling"); rolltop=r.clientHeight; while (r.childNodes.length) r.removeChild(r.childNodes[0]); r.style.position="relative"; r.style.overflow="hidden"; r.appendChild(document.createTextNode(String.fromCharCode(160))); for (i=0; i<text.length; i++) { diddly[i]=document.createElement("div"); diddly[i].style.position="absolute"; diddly[i].style.top=rolltop+"px"; diddly[i].style.left="0px"; if (text[i].indexOf("www")!=-1) slinkit(diddly[i], text[i]); else diddly[i].appendChild(document.createTextNode(text[i])); r.appendChild(diddly[i]); } rolling_in_the_hay(); } function rolling_in_the_hay() { var i, j; j=referee%text.length; for (i=rolltop; i>=0; i--) setTimeout("diddly["+j+"].style.top='"+i+"px'", speed(rolltop-i)); for (i=-1; i>-rolltop; i--) setTimeout("diddly["+j+"].style.top='"+i+"px'", delay-speedi); ++referee; setTimeout('rolling_in_the_hay()', delay); } function slinkit(r, t) { var a, s, e; s=t.indexOf("www"); e=t.indexOf(" ", s); if (e==-1) e=t.length; r.appendChild(document.createTextNode(t.substring(0, s))); a=document.createElement("a"); a.href="http://"+t.substring(s, e); a.appendChild(document.createTextNode(t.substring(s, e))); r.appendChild(a); r.appendChild(document.createTextNode(t.substring(e))); } // ]]> </script> CLICK HERE to select the above script ready to paste it into your clipboard
STEP 2: Edit the array called 'text' at the start of the script to contain the words which you want to appear. Enter links without the 'http://' but with the 'www.' and if you want text after a link, make sure there is a space after it.
STEP 3: Place a <div> element with 'id="rolling"' on your web-page containing some text which will show in case the script doesn't run (i.e. for people without JavaScript enabled). For example:
THAT'S IT When your page loads, the text you placed in the array at the start of the script will begin to smoothly scroll like some lost bus destination indicator.

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/dhtmlrolltext.php.

This page has been viewed 325 times. It was last viewed on Mon 30 Dec, 2024 at 14:56