Dynamic Drive- Bouncy message

IE5+

Bouncy message

Author: Dynamic Drive

Description: This is an energetic little text script that bounces a message around your visitor's window screen. Not only can you add HTML to the mix, but also, configure precisely the speed of the animation, and whether the message should disappear after x seconds. And to top it all off, the script works cross browser!

Demo: If you don't see it, it's time to upgrade those glasses! Note that in this demo, the message is set to display incessantly.

Directions

Step 1: Copy the below code and paste it into the <BODY> section of your page:

Select All
<style type="text/css"> #supertext { position:absolute; left:0; top:0; visibility:hide; visibility:hidden; } </style> <script language="JavaScript1.2"> /* Bouncy message script- By Dynamicdrive.com Code based on Lloyd Hassell's, at http://www.dynamicdrive.com/dynamicindex4/bounceimage.htm For full source, TOS, and 100s DTHML scripts, visit http://dynamicdrive.com */ //Configure the below three variables //1) Set message to display (HTML accepted) var thecontent='<h2><font color="#0000FF">Welcome to Dynamic Drive!</font></h2>' //2) Set delay after which message should be hidden, in miliseconds ('' makes it incessantly visible on the screen) var hidetimer=''; //3) Set speed of animation (1-50), where larger is faster var BallSpeed = 20; ///NO NEED TO EDIT BELOW THIS LINE/////////// var contentWidth; var contentHeight; var maxBallSpeed = 50; var xMax; var yMax; var xPos = 0; var yPos = 0; var xDir = 'right'; var yDir = 'down'; var superballRunning = true; var tempBallSpeed; var currentBallSrc; var newXDir; var newYDir; function initializeBall() { if (document.all) { xMax = document.body.clientWidth yMax = document.body.clientHeight document.all("supertext").style.visibility = "visible"; contentWidth=supertext.offsetWidth contentHeight=supertext.offsetHeight } else if (document.layers) { xMax = window.innerWidth; yMax = window.innerHeight; contentWidth=document.supertext.document.width contentHeight=document.supertext.document.height document.layers["supertext"].visibility = "show"; } setTimeout('moveBall()',400); if (hidetimer!='') setTimeout("hidetext()",hidetimer) } function moveBall() { if (superballRunning == true) { calculatePosition(); if (document.all) { document.all("supertext").style.left = xPos + document.body.scrollLeft; document.all("supertext").style.top = yPos + document.body.scrollTop; } else if (document.layers) { document.layers["supertext"].left = xPos + pageXOffset; document.layers["supertext"].top = yPos + pageYOffset; } animatetext=setTimeout('moveBall()',20); } } function calculatePosition() { if (xDir == "right") { if (xPos > (xMax - contentWidth - BallSpeed)) { xDir = "left"; } } else if (xDir == "left") { if (xPos < (0 + BallSpeed)) { xDir = "right"; } } if (yDir == "down") { if (yPos > (yMax - contentHeight - BallSpeed)) { yDir = "up"; } } else if (yDir == "up") { if (yPos < (0 + BallSpeed)) { yDir = "down"; } } if (xDir == "right") { xPos = xPos + BallSpeed; } else if (xDir == "left") { xPos = xPos - BallSpeed; } else { xPos = xPos; } if (yDir == "down") { yPos = yPos + BallSpeed; } else if (yDir == "up") { yPos = yPos - BallSpeed; } else { yPos = yPos; } } function hidetext(){ if (document.all) supertext.style.visibility="hidden" else if (document.layers) document.supertext.visibility="hide" clearTimeout(animatetext) } if (document.all||document.layers){ document.write('<span id="supertext"><nobr>'+thecontent+'</nobr></span>') window.onload = initializeBall; window.onresize = new Function("window.location.reload()"); } </script>

Have fun with it!

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post