참고사이트 : https://quizmuseum.imweb.me/
마우스 스크롤시 숫자가 올라가는 효과


01. 코드 텍스트 파일 다운(하단 코드카운터.ZIP 다운)
02. 상단 코드 위젯(4가지 명칭과 숫자 틀리게)
<div id="counter">
<div class="counter-value" data-count="283" data-desc="개설된 박물관">20</div>
</div>
03. 맨하단 코드 위젯(1가지만)
<style>
.counter-value {
font-weight:bold;
font-size: 48px;
text-align:center;
padding:16px 0;
}
.counter-value:after {
content: attr(data-desc);
display:block;
text-transform:uppercase;
font-weight:lighter;
font-size: 13px;
}
</style>
<script>
var a = 0;
$(window).scroll(function() {
var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 2000,
easing: 'swing',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
}
});
});
a = 1;
}
});
</script>
참고사이트 : https://quizmuseum.imweb.me/
마우스 스크롤시 숫자가 올라가는 효과
01. 코드 텍스트 파일 다운(하단 코드카운터.ZIP 다운)
02. 상단 코드 위젯(4가지 명칭과 숫자 틀리게)
<div id="counter">
<div class="counter-value" data-count="283" data-desc="개설된 박물관">20</div>
</div>
03. 맨하단 코드 위젯(1가지만)
<style>
.counter-value {
font-weight:bold;
font-size: 48px;
text-align:center;
padding:16px 0;
}
.counter-value:after {
content: attr(data-desc);
display:block;
text-transform:uppercase;
font-weight:lighter;
font-size: 13px;
}
</style>
<script>
var a = 0;
$(window).scroll(function() {
var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 2000,
easing: 'swing',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
}
});
});
a = 1;
}
});
</script>