beginner-javascript-code-base/BoxAnimation.html at master · gouravthakur39/beginner-javascript-code-base · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!--  This is a JS code for basic block animation -->

<!doctype html>
<html>
<head> <title>Animation using JS </title></head>
<body>
	<div id="container" style="width:200px ; height:200px ; background:green ; position:relative;">
		<div id="box" style="width:50px ; height:50px ;background:red; position:absolute;"> </div>
	</div>
	<script type="text/javascript">
		//calling the function in window.onload to make sure html is loaded
		window.onload=function() {
		//starting position
			var pos = 0;
			//our box element
			var box= document.getElementById('box');
			var t=setInterval(move ,10);
				//move box until the boundary is reached
			function move(){
				if(pos >=150){
					clearInterval(t);
				}
				else {
					pos += 1;
					box.style.left =pos +'px';
				}
			}
		};
	</script>
</body>
</html>