Free Javascripts - Bouncing Text

Bouncing Text

In a Nutshell: A simple, fast and effective way to add motion to any Website. Each letter bounces to a random (though controllable) height, as shown below:

________________________

Mesmerizing, isn't it?

Use it Yourself: Firstly, the following portion of code must be added between the <head> tags in your HTML code. Copy and paste the code from below.

<SCRIPT LANGUAGE="JavaScript">    var r=0 var a=11,b=9,c=7,d=10,e=11,f=8; var y2=-25,y1=-25,y3=-25,y4=-25,y5=-25,y6=-25; var x1=25,x2=55,x3=85,x4=115,x5=145,x6=175; function setVariables(){ if (navigator.appName == "Netscape") { horz=".left"; vert=".top"; visShow="'show'"; visHide="'hide'"; docStyle="document."; styleDoc=""; }else{ horz=".pixelLeft"; vert=".pixelTop"; visHide="'hidden'"; visShow="'visible'"; docStyle=""; styleDoc=".style"; } } function startbounce1(){ objectX1="object1" y1 += a evalMove1() if (y1<210) setTimeout("startbounce1()",20) else bounce1() } function bounce1(){ if (y1>201) a=11-r,r=Math.random()*100/25,Math.round(r); y1 -= a if (y1<100) a -= .5 evalMove1() if (y1>-100) setTimeout("bounce1()",1) else toggle() } function startbounce2(){ objectX2="object2" y2 += b evalMove2() if (y2<210) setTimeout("startbounce2()",20) else bounce2() } function bounce2(){ if (y2>201) b=8+r y2 -= b if (y2<100) b -= .5 evalMove2() if (y2>-100) setTimeout("bounce2()",2) else toggle() } function startbounce3(){ objectX3="object3" y3 += c evalMove3() if (y3<210) setTimeout("startbounce3()",20) else bounce3() } function bounce3(){ if (y3>201) c=7+r y3 -= c if (y3<100) c -= .5 evalMove3() if (y3>-100) setTimeout("bounce3()",1) else toggle() } function startbounce4(){ objectX4="object4" y4 += d evalMove4() if (y4<210) setTimeout("startbounce4()",2) else bounce4() } function bounce4(){ if (y4>201) d=8+r y4 -= d if (y4<100) d -= .5 evalMove4() if (y4>-100) setTimeout("bounce4()",2) else toggle() } function startbounce5(){ objectX5="object5" y5 += e evalMove5() if (y5<210) setTimeout("startbounce5()",1) else bounce5() } function bounce5(){ if (y5>201) e=12-r y5 -= e if (y5<100) e -= .5 evalMove5() if (y5>-100) setTimeout("bounce5()",2) else toggle() } function startbounce6(){ objectX6="object6" y6 += f evalMove6() if (y6<210) setTimeout("startbounce6()",1) else bounce6() } function bounce6(){ if (y6>201) f=8+r y6 -= f if (y6<100) f -= .5 evalMove6() if (y6>-100) setTimeout("bounce6()",1) else toggle() } function evalMove6(){ eval(docStyle + objectX6 + styleDoc + horz + '=' + x6); eval(docStyle + objectX6 + styleDoc + vert + "=" + y6); } function evalMove5(){ eval(docStyle + objectX5 + styleDoc + horz + '=' + x5); eval(docStyle + objectX5 + styleDoc + vert + "=" + y5); } function evalMove4(){ eval(docStyle + objectX4 + styleDoc + horz + '=' + x4); eval(docStyle + objectX4 + styleDoc + vert + "=" + y4); } function evalMove3(){ eval(docStyle + objectX3 + styleDoc + horz + '=' + x3); eval(docStyle + objectX3 + styleDoc + vert + "=" + y3); } function evalMove2(){ eval(docStyle + objectX2 + styleDoc + horz + '=' + x2); eval(docStyle + objectX2 + styleDoc + vert + "=" + y2); } function evalMove1(){ eval(docStyle + objectX1 + styleDoc + horz + '=' + x1); eval(docStyle + objectX1 + styleDoc + vert + "=" + y1); } </script>

Now, the variables come together in a visible display when this code is added to the page's <body> section. This section can easily be customized to alter the appearance of the dynamic result.

<BODY onload="setVariables(),startbounce1(),startbounce2(),startbounce3(),startbounce4(),startbounce5(),startbounce6()"> <div id="object1" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2"> <table width=10 bgcolor=#ffffff><td><FONT COLOR="#0080C0"><CENTER><B>b</B></CENTER></FONT></td></table></div> <div id="object2" style="position:absolute; visibility:show; left:55px; top:-50px; z-index:2"> <table width=10 bgcolor=#ffffff><td><FONT COLOR="#0080C0"><CENTER><B>o</B></CENTER></FONT></td></table></div> <div id="object3" style="position:absolute; visibility:show; left:85px; top:-50px; z-index:2"> <table width=10 bgcolor=#ffffff><td><FONT COLOR="#0080C0"><CENTER><B>u</B></CENTER></FONT></td></table></div> <div id="object4" style="position:absolute; visibility:show; left:115px; top:-50px; z-index:2"> <table width=10 bgcolor=#ffffff><td><FONT COLOR="#0080C0"><CENTER><B>n</B></CENTER></FONT></td></table></div> <div id="object5" style="position:absolute; visibility:show; left:145px; top:-50px; z-index:2"> <table width=10 bgcolor=#ffffff><td><FONT COLOR="#0080C0"><CENTER><B>c</B></CENTER></FONT></td></table></div> <div id="object6" style="position:absolute; visibility:show; left:175px; top:-50px; z-index:2"> <table width=10 bgcolor=#ffffff><td><FONT COLOR="#0080C0"><CENTER><B>e</B></CENTER></FONT></td></table></div> <div id="line1" style="position:absolute; visibility:show; left:15px; top:206px; z-index:1"> <table bgcolor=#ffffff><td><FONT COLOR="#0080C0"><CENTER><B>________________________</B></CENTER></FONT></td></table></div> <div id="note" style="position:absolute; visibility:show; left:25px; top:236px; z-index:1"> <table bgcolor=#ffffff><td><FONT COLOR="#000000"><CENTER><B>Your message here...</B></CENTER></FONT></td></table></div>

This Script Created By: Randy Bennett

Copyright © 1999-2024 Curiosity Cave Pty Ltd. All rights by all media reserved. All elements on this site, including page design, contents and graphics (with the obvious exception of the free Javascripts) may not be reproduced, broadcast, rewritten or redistributed in whole or in part without the expressed written permission of Curiosity Cave Pty Ltd.