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

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

元の数字になるとアニメーションがストップ
コード
<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);
});