数字がカウントアップするアニメーションを作成

数字がカウントアップするアニメーションを作成する方法を紹介します。

数字がフェードインしながらカウントアップします。元の数字になるとアニメーションがストップします。

数字がフェードインしながらカウントアップします。

元の数字になるとアニメーションがストップ

コード

<div id="column1">
	<div class="textcontent">
		<h1 class="log">2025</h1>
	</div>
</div>
#column1 {
    display: grid;
	place-content: center;
	height: 100vh;
	width: 100vw;
	position: relative;
	overflow: hidden;
    background: #555;
}
h1 {
    margin: 30px 0;
    font-size: 5em;
}
.textcontent{
	opacity: 0;
}
const myNumber = document.querySelector('.log') ; //アニメーション箇所
const newNumber = myNumber.textContent - 20 ; //年号-20
const newArray = new Array(20); //配列数個

const TimelineAnimateFade = (entries, obs) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
        
		for(let i = 0; i < newArray.length; i++){
            //カウントアップ
	        newArray[i] = newNumber + i + 1;

	        //テキストを数秒毎に代入
	        setTimeout( () => {
		        myNumber.innerHTML = newArray[i];
	        },50 * i + 1.4 ** i)
        }
		
      // 一度表示されたら監視をやめる
      obs.unobserve(entry.target);
    }
  });
};
// 監視設定
const TimelinefadeObserver = new IntersectionObserver(TimelineAnimateFade);

// .logを監視するよう指示
const TimelinefadeElements = document.querySelectorAll('.log');
TimelinefadeElements.forEach((fadeElement) => {
  TimelinefadeObserver.observe(fadeElement);
});

RECOMMEND

CONTACT

Webサイト作成は、是非
CXG DESIGNへご検討ください。