Java Reference
In-Depth Information
Animation
The
setTimeOut()
and
setInterval()
methods can be used to animate elements on
a web page. As an example, let's create a web page that shows a colored square, and make
it rotate. Create a folder called animation that contains index.htm, a css folder containing
styles.css, and a js folder containing scripts.js. Place this code inside index.htm:
index.htm
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animation Example</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="square"></div>
<script src="js/scripts.js"></script>
</body>
</html>
This places a div on the page with an ID of
square
. Add the following styles.css:
styles.css
#square {
margin: 100px;
width: 100px;
height: 100px;
background: #d16;
}
This will set the position, dimensions, and color of the div. Now for the animation―add the
following code to scripts.js:
scripts.js (excerpt)
