CSS graphics animation
Objectives
- use CSS and a GIF image for graphics animation
- use simple JavaScript for simple animation
In-class demonstration code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script>
var dx = 2, dy = 3, x = 30, y = 120;
var elem = null;
function draw() {
if (elem == null) return;
if (x < 0 || x > 160) dx = -dx;
if (y < 0 || y > 260) dy = -dy;
x += dx;
y += dy;
elem.style.left = x + "px";
elem.style.top = y + "px";
}
window.onload = function() {
elem = document.getElementById('ball');
setInterval(draw, 10);
}
</script>
<style>
h1 { text-align: center; }
#content {
display: block;
width: 200px;
height: 300px;
margin: 0 auto;
border: 1px solid #000000;
background-color: #ff8080;
}
#ball {
position: relative;
top: 120px;
left: 30px;
}
</style>
</head>
<body>
<h1>Demo</h1>
<div id="content">
<img src="ball.gif" id="ball" width="40" height="40">
</div>
</body>
</html>