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

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

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

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

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

    コード

    <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);
    });