숫자 카운팅 애니 효과
<style>
.percent {
font-size: 72px;
position: absolute;
left: 45%;
}
</style>
<div class="percent">0</div>
<script>
// Use requestAnimationFrame with setTimeout fallback
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var percentEl = document.querySelector('.percent');
var max = 100;
(function animloop() {
if (percentEl.innerHTML >= max) { return; } //Stop recursive when max reach
requestAnimFrame(animloop);
percentEl.innerHTML++;
})();
</script>
결과보기
https://codepen.io/phliem/pen/EKVNva
