Animations in JavaScript
Animations
JavaScript animations is used to capture the attention of your users, keep them engaged, and provide them with a great user experience.
Creating an Animation
Step 1:- After creating a container style them. Container elements should have a relative position always, and the animation elements should have an absolute position.
<div id ="animation-container">
<div id ="animation">JavaScript animation will go here</div>
</div>
Step 2:- To create a JavaScript animation, first create a animation container. Container elements should have a relative position always, and the animation elements should have an absolute position.
#animation-container {
width: 300px;
height: 300px;
position: relative;
background: yellow;
}
#animation {
width: 30px;
height: 30px;
position: absolute;
background: red;
}
Step 3:- Animations in JavaScript can be easily done by gradual changes in an element's style. The changes are called by a timer. Continuous JavaScript animations can be achieved by setting a tiny timer interval using the setInterval function.
var id = null;
function animationMove() {
var element = document.getElementById("animation");
var loc = 0;
clearInterval(id);
id = setInterval(frame, 5);
function frame() {
if (loc == 350) {
clearInterval(id);
} else {
loc++;
element.style.top = loc + "px";
element.style.left = loc + "px";
}
}
}