現在制作中のクライアント様のWEBサイトにおいて、数字をカウントアップして表示するアニメーションを実装しました。

厳密に言うと、スクロールをして数字が画面内に入ったら（数字の場所に到達したら）カウントアップして表示するという動きです。

実際のアニメーションが下記です。

※クライアント様の許可を得て掲載しております。

このカウントアップアニメーションは、数値を目立たせたいときなどにとても効果的です。

カウントアップアニメーションの仕組み

アニメーションの仕組みは下記です。

①「Intersection Observer」を使って数字の場所を検知する
②JavaScriptで関数「setInterval」を使ってカウントアップする

スクロールで数字の場所を検知する仕組み

ページが表示される（読み込まれる）と同時にカウントアップがされてしまうと、その場所までスクロールした時にはすでにカウントアップが終了し数字が表示されてしまっている状態となってしまいます。

なので、スクロールをして数字が画面に入ったらアニメーションを発動させるという動きにしなければいけません。

そこで使用するのが、Intersection ObserverというJavaScriptのAPIです。

Intersection Observerとは、簡単に言うと「目的の要素（今回でいう数字）が画面の中に入ったり出たりするのを自動で判別するためのツール」です。

Intersection Observerを使って数字が画面内に入ったことを検知し、これによってアニメーションを始めるという動きを実装します。

カウントアップの仕組み

数字がカウントアップする仕組みは、一定時間ごとに数値を足していくという簡単なものです。

これをJavaScriptで実現するためには「setInterval」という関数を使用します。

「setInterval」を使用し、ミリ秒単位で「現在の数値に１を足す」という動作を繰り返す処理を行います。

そうすることで、見た目では数字がカウントアップしているように見えるようになります。

そして、「目的の数字まで到達したら止める」という判定を入れておくことで、目的の数字までスムーズに増え、そして止まるという動きを作ることができます。

スクロールで数字が表示内に入ったらカウントアップして表示するコード

まずは、ターゲット要素（カウントアップさせたい数字を表示する要素）をHTMLで作ります。

ターゲット要素には「class」と「id」に「counter」と設定しておきます。

html

<div class=”counter” id=”counter”>0</div>

次に、「Intersection Observer」と「setInterval」を使って、対象の要素が画面内に入った瞬間にカウントアップのアニメーション処理をスタートするスクリプトを書きます。

script

document.addEventListener(‘DOMContentLoaded’, function() {

　let counterElement = document.getElementById(‘counter’);

　let observer = new IntersectionObserver(function(entries) {

　　entries.forEach(entry => {

　　if (entry.isIntersecting) {

　　　let start = 0;

　　　let end = 100;

　　　let duration = 2000; // 2秒でカウントアップ

　　　let range = end – start;

　　　let current = start;

　　　let increment = end > start ? 1 : -1;

　　　let stepTime = Math.abs(Math.floor(duration / range));

　　　let timer = setInterval(function() {

　　　　current += increment;

　　　　counterElement.textContent = current;

　　　　if (current == end) {

　　　　　clearInterval(timer);

　　　　}

　　　}, stepTime);

　　　observer.unobserve(entry.target);

　　}

　});

　}, { threshold: 1.0 });

　observer.observe(counterElement);

});

IntersectionObserverのコード解説

IntersectionObserverは、スクロールして要素が画面内に入ったら処理をスタートするという役割のためのコードです。

ターゲット要素が画面に入ったかどうかをチェック

let observer = new IntersectionObserver(function(entries) {

画面に入ったかどうかを判定

if (entry.isIntersecting) {

１回だけ実行して止める

observer.unobserve(entry.target);

要素が100％すべて画面に入ったときにだけ反応する

{ threshold: 1.0 }

この「counterElement」を監視対象にするという指示

observer.observe(counterElement);

setIntervalのコード解説

setIntervalは、カウントアップアニメーションを実現するためのコードです。

数字を１ずつ増やす

current += increment;

画面に表示する

counterElement.textContent = current;

目標の数字まで来たら止める

if (current == end) {

  clearInterval(timer);

}

何ミリ秒ごとに動かすか？

}, stepTime);

ここに入っている「stepTime」は、

let duration = 2000;

let range = end – start;

let stepTime = Math.floor(duration / range);

によって計算されています。

カウントアップアニメーションは、「現在の数字に１を足す」を繰り返すことでカウントアップに見える仕組みだとお伝えしました。

このコードによって、２秒で目的の数字に到達するために１を足すちょうど良いペースを自動計算しています。

最後に

今回は数字のカウントアップアニメーションの実装方法をご紹介しましたがいかがでしたでしょうか。

一見難しそう、いや、実際に難しいカウントアップアニメーションですが、仕組みを一つひとつ理解することで意外とシンプルな構造で動いていることが分かり、実装できそうではないでしょうか。

冒頭でもお伝えしましたが、数値を目立たせたい時になどにおすすめのアニメーションです。

あなたの会社やお店が持っている魅力的な数値は、ただ表示するだけではなく、ぜひともカウントアップアニメーションで表示してみてください。

記事一覧に戻る