Create Counter Up with JavaScript

This tutorial blog help you to learn and create Counter-Up with jQuery. This tutorial blog help you to create Counter-Up Plugin using jQuery.

Video tutorial of CounterUp with javascript

This tutorial Video help you to learn and create Counter-Up with jQuery. This tutorial Video help you to create Counter-Up Plugin using jQuery.

CounterUp with javascript [Source Codes]

This source code can help you to create CounterUp with javascript

jQuery library source

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>

<body>
<div style="height: 300px"></div>
<div id="count_section" style="padding: 100px 0; background-color: #ccc">
	<div class="counter_col">
		<div class="counter_slow" data-count-val="1111" data-count-duration="20" data-count-start="0">0</div>
	</div>
	<div class="counter_col">
		<div class="counter_slow" data-count-val="2222" data-count-duration="20" data-count-start="0">0</div>
	</div>
	<div class="counter_col">
		<div class="counter_slow" data-count-val="3333" data-count-duration="20" data-count-start="0">0</div>
	</div>
</div>
<div style="height: 1600px"></div>

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-shadow: border-box;
	-moz-box-shadow: border-box;
	-ms-box-shadow: border-box;
	box-shadow: border-box;
}
body{
	margin:0;
}

.counter_col{
	display: inline-block;
	width: 30%;
	text-align: center;
	font-size: 30px;
}
.counter_slow{
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background-color: #fff5f5;
	margin:0 auto;
	line-height: 150px;
	box-shadow: 2px 2px 5px #8a8989;
}

.x1{
	width: 200px;
	height: 100px;
	background-color: gray;
	color: #fff;
	font-size: 80px;
}
.xx{
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	transition: all 1s ease-in-out;

}
.fx{
	z-index: 1;
	position: relative;
}
.slide_wrap{
	position: relative;
}
.arrow{
	display: inline-block;
	padding: 10px;
	cursor: pointer;
	background-color: yellow
}

JavaScript Code

Copy

scrollCount = 1;
count_sectionTop = $('#count_section').offset().top;
$(window).scroll(function(event) {

	if($(window).scrollTop() > count_sectionTop){
	 	timerId = setTimeout(function(){
		 	maxCounts = [];
			maxCountDivides = [];
			counts = [];
			$(".counter_slow").each(function(index, el) {

				maxCount = $(this).attr('data-count-val');
				maxCount = parseInt(maxCount);
				maxCounts.push(maxCount);

				maxCountDivide = $(this).attr('data-count-duration');
				maxCountDivide = parseInt(maxCountDivide);
				maxCountDivides.push(maxCountDivide);

				count = $(this).attr('data-count-start');
				count = parseInt(count);
				counts.push(count);
				
				function myCount() {
					counts[index] += maxCountDivides[index];
					$(".counter_slow").eq(index).text(counts[index].toLocaleString());
					if(counts[index] > maxCounts[index]){
						$(".counter_slow").eq(index).text(maxCounts[index].toLocaleString());
					}
				}

				setInterval(function(){
					if(counts[index] < maxCounts[index]){
						myCount();
					}
				
				},10);

			});
	 		scrollCount = 2; 

		});

		if(scrollCount == 2){
			clearTimeout(timerId);
			
		}
		
	}


});

Create Counter Up with JavaScript

Video tutorial of CounterUp with javascript

CounterUp with javascript [Source Codes]

Build a Stop-Watch Web App Using JavaScript

Build Loan EMI Calculator DIY Finance Tool using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery