오식랜드
[javascript motion] 숫자 카운팅 모션 본문
반응형
숫자가 0에서부터 특정 숫자로 화면에 보여지며 바뀌는 모션이 필요할 때가 있을 것이다.
내 경우에는 사건을 총 5000건을 맡았다! 하며 0에서 5000으로 숫자가 올라가는 모션을 만들 목적이였다.
코드는 아주 아주 간단하다!
setInterval로 count = 0 에서 100씩 더해주다가,
5000이 되면 setInterval을 멈추는 clearInterval을 실행하고, 리턴시켜준다.
물론 시간, 숫자 등은 원하는대로 커스텀 하면 된다!
innerHTML에서 사용한 코드는 숫자 서식을 지원하는 객체의 생성자이다.
원하는 지역의 서식을 사용하면 된다.
참고 링크 : developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
gif는 프레임 영향으로 버벅이듯이 보이지만 실제로 사용해보면 부드럽고 매끄럽게 숫자가 오를 것이다!
Intl.NumberFormat - JavaScript | MDN
Intl.NumberFormat Intl.NumberFormat은 언어에 맞는 숫자 서식을 지원하는 객체의 생성자입니다. 상호작용 가능한 예제의 소스는 GitHub 리포지토리에 보관되어 있습니다. 상호작용 예제 프로젝트에 기여
developer.mozilla.org
gif는 프레임 영향으로 버벅이듯이 보이지만 실제로 사용해보면 부드럽고 매끄럽게 숫자가 오를 것이다!
<!DOCTYPE html>
<body>
<h2 id="count"></h2>
<script>
let countBox = document.querySelector('#count'),
count = 0;
let counting = setInterval(function () {
if (count == 5000) {
clearInterval(counting);
return false;
}
count += 100;
countBox.innerHTML = new Intl.NumberFormat().format(count);
}, 20);
</script>
</body>
</html>반응형
'dev-log > html·css·js' 카테고리의 다른 글
| [javascript] 요소의 좌표값 구하기 (0) | 2021.05.06 |
|---|---|
| [javascript] 화면 스크롤 값 구하기 (0) | 2021.05.06 |
| [nuxt / motion] clip을 이용한 슬라이드 (0) | 2021.05.04 |
| [javascript motion] 밑줄 그어지는 모션 (0) | 2021.05.04 |
| [javascript motion] 스크롤 반응 모션 (0) | 2021.04.30 |
'dev-log/html·css·js' Related Articles
more
Comments