jQuery Incremental Counter - 숫자가 올라가는 카운터 예제
jquery.incremental-counter 플러그인을 이용해 숫자가 점점 올라가는 애니메이션 카운터를 만드는 예제다. jQuery와 플러그인 파일을 로드하고, .incremental-counter 요소에 data-value 속성으로 목표 숫자를 지정한 뒤 incrementalCounter()를 호출하면 페이지 진입 시 숫자가 증가하며 표시된다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Incremental Counter Plugin Demo</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.incremental-counter.js"></script>
<style>
body { background-color:#384047;}
.container { margin:150px auto; max-width:500px; text-align:center}
h1 { margin-bottom:30px; color:#fff; text-align:center;}
.incremental-counter{margin:1%}
.incremental-counter .num {
background: #eee;
border: 1px solid #fff;
border-radius: 4px;
color: #384047;
display: inline-block;
height: 64px;
line-height: 62px;
margin: 0 4.5px;
position: relative;
text-align: center;
top: -1px;
width: 50px;
font-size: 45px;
font-size: 3.72625em;
font-weight: 700;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
font-family: "Open Sans",Arial,Helvetica,sans-serif;
}
.incremental-counter .num::before {
background: #384047;
content: "";
display: block;
height: 1px;
left: -1px;
margin: -0.5px 0 0;
position: absolute;
right: -1px;
top: 50%;
width: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="incremental-counter" data-value="55650"></div>
<div class="incremental-counter" data-value="360"></div>
<div class="incremental-counter" data-value="36200"></div>
</div>
<script>
$(".incremental-counter").incrementalCounter();
</script>
</body>
</html>