Skip to content

Commit 751b4b3

Browse files
Merge pull request #12 from instinxt/BoxAnimation
Added javascript Box Animation program
2 parents 3731c3a + 0c431ed commit 751b4b3

File tree

1 file changed

+31
-0
lines changed

1 file changed

+31
-0
lines changed

BoxAnimation.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!-- This is a JS code for basic block animation -->
2+
3+
<!doctype html>
4+
<html>
5+
<head> <title>Animation using JS </title></head>
6+
<body>
7+
<div id="container" style="width:200px ; height:200px ; background:green ; position:relative;">
8+
<div id="box" style="width:50px ; height:50px ;background:red; position:absolute;"> </div>
9+
</div>
10+
<script type="text/javascript">
11+
//calling the function in window.onload to make sure html is loaded
12+
window.onload=function() {
13+
//starting position
14+
var pos = 0;
15+
//our box element
16+
var box= document.getElementById('box');
17+
var t=setInterval(move ,10);
18+
//move box until the boundary is reached
19+
function move(){
20+
if(pos >=150){
21+
clearInterval(t);
22+
}
23+
else {
24+
pos += 1;
25+
box.style.left =pos +'px';
26+
}
27+
}
28+
};
29+
</script>
30+
</body>
31+
</html>

0 commit comments

Comments
 (0)