JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
DOM Animations
A Basic Web Page
To illustrate how to create HTML animations with JavaScript, we will use a simple web page:
Example
<!DOCTYPE html>
<html>
<body>
<h2>My First JavaScript Animation</h2>
<div id=”animation”>My animation will go here</div>
</body>
</html>
Output
My First JavaScript Animation
Create an Animation Container
All animations must be relative to a container element.
Example
<div id =”container”>
<div id =”animate”>My animation will go here</div>
</div>
Style the Elements
The container element must be created with style = “position: relative”.
The animation element must be created with style = “position: absolute”.
Example
<!Doctype html>
<html>
<style>
#container {
width: 200px;
height: 150px;
position: relative;
background: brown;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background: black;
}
</style>
<body>
<h2>My First JavaScript Animation</h2>
<div id=”container”>
<div id=”animate”></div>
</div>
</body>
</html>