Skip to content

Instantly share code, notes, and snippets.

@antonioortegajr

antonioortegajr/moving-thingy.html

Created December 11, 2015 17:32
Show Gist options
  • Save antonioortegajr/2df8f7edf44ee142b108 to your computer and use it in GitHub Desktop.
Save antonioortegajr/2df8f7edf44ee142b108 to your computer and use it in GitHub Desktop.
Download ZIP
HTML and js for a moving thingy.
Raw
moving-thingy.html
<html>
<head>
<style type="text/css">
#boundingBox
{
position: absolute;
border: 1px #000000 solid;
width: 520px;
height: 180px;
left: 50px;
top: 50px;
}
#myAnimDiv
{
background-color: #CC3333;
border: 1px #000000 solid;
text-align: center;
position: absolute;
width: 100px;
height: 40px;
top: 10px;
left: 10px;
}
</style>
<script language="javascript">
<!--
var colourArray = ['#CC3333', '#33CC33', '#3333CC', '#CCCC33', '#CC33CC', '#33CCCC']
var currentColour = 0;
var xInc = 1;
var yInc = 1;
var xPos = yPos = 10;
var animHandle = null;
function stopAnimation() { clearTimeout(animHandle); }
function startAnimation() { animHandle = setInterval('doAnimation();', 10); }
function doAnimation()
{
var animDiv = document.getElementById('myAnimDiv');
xPos += xInc;
yPos += yInc;
if (xPos > 405) { xInc = -1; currentColour++; }
if (xPos < 10) { xInc = 1; currentColour++; }
if (yPos > 125) { yInc = -1; currentColour++; }
if (yPos < 10) { yInc = 1; currentColour++; }
if (currentColour == colourArray.length) currentColour = 0;
animDiv.style.left = xPos;
animDiv.style.top = yPos;
animDiv.style.backgroundColor = colourArray[currentColour];
}
//-->
</script>
</head>
<body>
<a href="javascript:stopAnimation();">Stop</a> | <a href="javascript:startAnimation();">Start</a>
<div id="boundingBox"><div id="myAnimDiv">Hello World!</div></div>
</body>
</html>
@antonioortegajr
Copy link
Author

Originally found here: http://www.tek-tips.com/viewthread.cfm?qid=758315

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment