Cut And
Paste Code For Lesson 14
This week we'll
look at how to do an animation with rectangles, much like we did before
HOWEVER
we'll use object oriented code which is much easier to read!
Click here
to go back to our lessons page.
Rectangle animation. How about adding a loop?:
<!DOCTYPE html>
<html>
<style>
#container {
width:
400px;
height: 400px;
position: relative;
background:
yellow;
}
#animate {
width: 50px;
height:
50px;
position: absolute;
background-color: red;
}
</style>
<body>
<p>
<button
onclick="myMove()">Click Me</button>
</p>
<div
id ="container">
<div id ="animate"></div>
</div>
<script>
function
myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame,
5);
function frame() {
if (pos ==
350) {
clearInterval(id);
}
else {
pos++;
elem.style.top
= pos + 'px';
elem.style.left = pos
+ 'px';
}
}
}
</script>
</body>
</html>