Loading Please Wait...
JavaScript can be used to create animations on the HTML page.
HTML DOM animations are nothing but changing the style and appearance of the HTML element.
We will create a simple JavaScript animation. For this we need a simple web page:
<html>
<head>
<style>
/* basic style */
</style>
</head>
<body>
<!-- Button to start animation -->
<!-- Animation element -->
<script>
// animation code
</script>
</body>
</html>
When we create animated element it should be container in a container element.
<div id="container">
<div id="animate">Animation elemet</div>
</div>
The container element should be created with style, "position: relative".
The container element should be created with style, "position: absolute".
#container {
width: 300px;
height: 300px;
position: relative;
background: #161925;
}
#animate {
width: 30px;
height: 30px;
position: absolute;
background: #CA61C3;
}
JavaScript animations are done by programming gradual changes in an element's style.
The changes are called by a timer. When the timer interval is small, the animation looks continuous.
id = setInterval(frame, 5);
function frame() {
if (/* test for completion */) {
clearInterval(id);
} else {
/* code to change the element style */
}
}
<html>
<head>
<style>
#container {
width: 300px;
height: 300px;
position: relative;
background: #161925;
}
#animate {
width: 30px;
height: 30px;
position: absolute;
background: #CA61C3;
}
</style>
</head>
<body>
<p><button onclick="myMove()">Click Me</button></p>
<div id="container">
<div id="animate"></div>
</div>
<script>
function myMove() {
let id = null;
const elem = document.getElementById("animate");
let pos = 0;
clearInterval(id);
id = setInterval(frame, 5);
function frame() {
if (pos == 270) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
}
</script>
</body>
</html>
<html>
<head>
<style>
body{
background: #161925;
}
#circle{
width: 40px;
height: 40px;
border-radius: 50%;
position: absolute;
background: #CA61C3;
transform: translate(-50%, -50%);
transition: 0.1s ease-out;
}
</style>
</head>
<body>
<div id="circle"></div>
<script>
let circle = document.getElementById("circle");
document.addEventListener("mousemove", function(e){
var xPos = e.pageX;
var yPos = e.pageY;
circle.style.left = xPos + "px";
circle.style.top = yPos + "px";
});
</script>
</body>
</html>
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved