안녕하세요!
카운팅 숫자의 업그레이드 버전을 알아보겠습니다.
우선 구현이 어떻게 되는지 결과 부터 보시죠!
스크롤을 내려 주세요!
Result
Html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스크롤과 숫자 증가 예제</title>
<style>
</style>
</head>
<body>
<p class="txt">Count number</p>
<ul class="counting">
<li>
<span class="title">사용자</span>
<strong class="number"><span id="person"></span>명</strong>
</li>
<li>
<span class="title">방문자</span>
<strong class="number"><span id="visitor"></span>명</strong>
</li>
<li>
<span class="title">대기시간</span>
<strong class="number"><span id="waiting"></span>분</strong>
</li>
<li>
<span class="title">대기문서</span>
<strong class="number"><span id="document"></span>건</strong>
</li>
</ul>
<script>
</script>
</body>
</html>
JavaScript
function animateValue(id, start, end, duration) {
var range = end - start;
var current = start;
var increment = end > start ? 1 : -1;
var stepTime = Math.abs(Math.floor(duration / range));
var obj = document.getElementById(id);
var timer = setInterval(function() {
current += increment;
obj.innerText = current;
if (current == end) {
clearInterval(timer);
}
}, stepTime);
}
window.addEventListener('scroll', function() {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var contributeNumbers = document.querySelectorAll('.counting .number span');
Array.prototype.forEach.call(contributeNumbers, function(item) {
if (scrollTop >= 1200 && !item.classList.contains('active')) {
item.classList.add('active');
animateValue("person", 0, 331, 2000);
animateValue("visitor", 0, 1231, 3000);
animateValue("waiting", 0, 613, 2000);
animateValue("document", 0, 140, 2000);
}
});
});
css
.txt{
font-size: 2rem;
text-align: center;
font-weight: bold;
padding-top: 100px;
}
.counting {
list-style-type: none;
padding-top: 1500px;
display: flex;
gap: 20px;
padding-bottom: 300px;
justify-content: center;
}
.counting li {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 160px;
height: 160px;
border-radius: 200px;
padding: 0;
background-color: #fcfcfc;
border: 3px solid #fff;
box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1);
}
.title {
font-weight: bold;
font-size: 1.2rem;
}
.number {
font-size: 1rem;
color: #a2a2a2;
font-weight: normal;
}
.number span {
font-size: 2rem;
color: black;
font-weight: bold;
}
일전에 숫자가 카운팅 되는 효과를 주는 방법을 업로드 한적 있었는데요.
오늘은 그 버전의 업그레이 버전을 준비했어요.
보통은 카운팅 되는 효과는 페이지 중간쯤 오는 경우나 하단에 오는경우들이 많아요.
그러다 보니, 스크롤이 어느정도 되었을 때 카운팅이 시작 될 수 있게 하는 방법이 필요해서 찾아 봤습니다.
추가글
[JS 활용]숫자가 카운팅/카운트 되게 하는 제이쿼리 소스
728x90
반응형
'퍼블리싱' 카테고리의 다른 글
| [css]Flex아이템 li 요소 4개씩 한 줄에 배치하기 (0) | 2024.08.26 |
|---|---|
| [CSS] 변수를 음수로 변환하는 방법 (0) | 2024.08.02 |
| [CSS]마우스 호버시 아이콘 모양 변경(사이드바 보기/감추기역할) (0) | 2024.06.19 |
| [Javascript, css] 라이트모드/다크모드 설정 day night mode (0) | 2024.06.14 |
| [jQuery]셀렉트박스+제이쿼리, 셀렉트 선택 시 내용 보여지게 (0) | 2024.02.22 |
댓글