Counter animation is used for building the website attractive and great looking, with the help of Counter animation you express your count data within the new style.
They work Count beginning to the given number within the animation. Counter animation is so important without this website is half-done.
Beginners also easily make counter animation in JavaScript only requirement is Basic Knowledge of Html, CSS, and JavaScript.
How To Write Code For Building Counter Animation?
Html and CSS are used for developing structures and designing of webpage this is not too compulsory using the same code, you free to invent own but using ID and Classes with carefully.
In JavaScript, we using the Set-Interval function propriety.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Counting Animation</title>
</head>
<body>
<div class="header">Counter Animation</div>
<div class="container">
<h1 class="number">1000</h1>
<p class="text">Likes</p>
</div>
<script src="script.js"></script>
</body>
</html>CSS
*{
margin: 0;
padding: 0;
}
body{
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
background-color: #000;
}
.header{
background-color: #fff;
color: #000;
font-weight: bold;
text-align: center;
}
.container{
position: absolute;
top: 50%;
left: 50%;
color: #fff;
text-align: center;
font-size:20px;
}JavaScript
let counter = document.querySelector(".number");
let text = document.querySelector(".text");
let count = 1;
setInterval(function () {
if (count < 1000) {
count++;
counter.innerHTML = count;
}
}, 1);
Conclusion
Anyone easily Build Counter, Source Code is provided and No need a high level of programming knowledge.
CSS and HTML are the same this is not compulsory Because they are just used for structure and designing, and everyone develops their own design and structure.
this code is only built a one counter when you build a website also able to prepare multiple Counting data within an animation help of a given source code.
