DOM Animations

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

My animation will go here

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>

My First JavaScript Animation


Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420