JavaScriptだけで簡単実装！数値が動くカウントアップアニメーションの作り方

例えば、実績紹介や売上、訪問者数などの「数字」がスクロールに合わせてスーッとカウントアップしていく演出。あの視覚効果、見ている側としても「おっ、動いてる！」と興味を引かれますよね!

しかもこの仕組み、実はJavaScriptだけで、意外とシンプルに実装できるんです。今回は、外部ライブラリなしで、軽量かつ汎用的なカウントアップアニメーションを作る方法を、やさしく、しっかり解説します！

カウントアップアニメーションとは？

「〇〇名が利用しています！」の人数表示
「開業から〇年」の経過年数
「売上実績〇万円」などのビジネス実績

まずはHTMLの基本構造

このように、表示したい数値（最終的に1000までカウントアップさせたい）が data-target 属性に設定されています。初期値は「0」。ここからJavaScriptで、目標値まで徐々に数値を増やしていくという仕組みです。

JavaScriptでアニメーションを実装

const counters = document.querySelectorAll(".counter"); counters.forEach((counter) => < counter.innerText = "0"; const updateCount = () =>< const target = +counter.getAttribute("data-target"); const current = +counter.innerText; const increment = target / 100; if (current < target) < counter.innerText = `$`; setTimeout(updateCount, 20); > else < counter.innerText = target; >>; updateCount(); >);

target … カウントアップの最終値（data属性から取得）
increment … 100ステップ程度で到達するように、1回あたりの増分を設定
setTimeout … 20msごとに数字を更新し、アニメーションに見せている

スクロール時に実行するよう改良

せっかく作ったアニメーションも、ユーザーが見ていない場所で勝手に動いていたら意味がありませんよね。そこでおすすめなのが、Intersection Observer APIを使って「要素が画面に入ったら発火」という改良です。

この方法を使えば、ユーザーが要素を見たタイミングで自然にアニメーションが始まるので、UXとしてもかなりスマートです!

カウントアップ演出が活きるシーン

まとめ

今回は、JavaScriptだけでシンプルにカウントアップアニメーションを実装する方法をご紹介しました。

見た目の華やかさだけでなく、数字による信頼の見せ方として、ビジネスサイトや実績紹介ページなど、幅広く使えるテクニックです。

📎📎📎📎📎📎📎📎📎📎