728x90
반응형
0에서 지정한 숫자까지 카운트업 되는 효과입니다.
1. <head> </head> 태그 안에 제이쿼리를 불러옵니다.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
2. HTML
<div class="count"><span class="num">100</span>%</div>
<div class="count"><span class="num">500</span>%</div>
3. CSS
.count { float: left; width: 100px; height: 100px; line-height: 95px; margin: 0 5px; border: 5px solid #ddd; -moz-border-radius: 50%; -webkit-border-radius: 50%; -khtml-border-radius: 50%; border-radius: 50%; font-size: 15px; color: #000; text-align: center; }
.num { font-size: 28px; font-weight: bold; color: #000; }
4. jQuery
$(function(){
$('.num').each(function(){
$(this).prop('Counter', 0).animate({
Counter: $(this).text()}, {
duration: 3000,
easing: 'swing',
step: function (now){
$(this).text(Math.ceil(now));
}
});
});
});
728x90
