WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

jQueryで数字をカウントアップしながら表示する方法

Webページ上になにかの実績数や投票数、SNSのシェア数などの数値を表示する際に
単純に数字を表示するだけでなく数字がカウントアップするアニメーションをつけることで
ユニークな見た目でのインパクトある演出で数字を印象づけることができます。

そんな数値のカウントアップアニメーションを
jQueryを使ってシンプルに実装するサンプルを作ってみたので紹介してみます。

jQueryで数字をカウントアップしながら表示する方法

「jQueryで数字をカウントアップしながら表示する方法」サンプルを別枠で表示

Webページ上に配置された数字がページロードと共にカウントアップされ
設定した数値で最終的に止まって表示されます。

数字は開始番号と最終的に表示する値までを指定し、カウントアップアニメーションします。
アニメーションするスピードも設定可能です。

全体構成についてまずはHTMLから。

[html]
◆HTML

0

[/html]

実装させるタグはブロック要素とインライン要素のどちらでも可能です。
タグ自体に動作を実装させることも可能ですが、
サンプルではクラス「.count」をつけたものに実装する構成にしています。

実装するタグの中身に開始番号を指定し、
「data-num」属性を使って最終的に止まって表示する数値を指定します。

このサンプルの場合は、
「0」から「100」までカウントアップアニメーションします。

タグで囲われた開始の数字を「50」といった値にすることで、
「50」から「100」までのカウントアップアニメーションを実装することができます。

このサンプルではCSSの指定は特に動作に影響しないので割愛しますが、
フォントの種類やサイズ等をCSSで調整することで
見た目を装飾させることができます。

そして実際のカウントアップアニメーション動作スクリプトは
以下の様になります。

[javascript]
◆SCRIPT


[/javascript]

スクリプト開始部分にある設定値の内容は以下の様になっています。

countElm = $(‘.count’) カウントアップ動作させる要素
countSpeed = 10 カウントアップするスピード

「countElm」が動作対象の要素の指定になり、
CSSクラスやIDまたはタグ自体を指定させることができます。

「countSpeed」は数値が一つ加算される際のスピードになり、
この値を小さくすればアニメーションは速くなり、大きくするとゆっくりになります。

スクリプト構成はタグで囲われた数値を取得して、
その値に「1」を足した値に書き換え続け、
「data-num」属性に指定された数値に到達した時点で
アニメーションをストップさせています。

画像を使わないシステムフォントで構成しているので
GoogleフォントなどのWebフォントを使用することで
簡単に飾り気のあるフォントでカウントアップの動作を実装させることも可能になります。

「GoogleFontパターン:jQueryで数字をカウントアップしながら表示する方法」サンプルを別枠で表示

以上が数字をカウントアップさせるアニメーションで表示する方法でした。

注目させたい数字や、ランキング発表をする際の演出など、
とても目を引くアニメーションをつけることができるかと思います。

jQueryで数字にカウントアップアニメーションをつける際に是非。。

サンプルファイルをダウンロードしたい方はこちらから

jQueryで数字をカウントアップしながら表示する方法」への3件のフィードバック

  • 2018年5月9日 @ 1:28 PM
    パーマリンク

    いつもJqueryの実装の参考にさせていただいてます。
    整数はこのままで使用出来たのですが、小数点を含む数字にすると永遠にループをしてしましました。
    何かいい方法はないでしょうか。

    苦肉の策として今はこのような実装にしています。
    0.0

    返信
  • 2018年5月10日 @ 1:30 AM
    パーマリンク

    >hiroyukiさん
    コメントありがとうございます。
    当記事のカウントアップスクリプトをご検討いただいているようで
    うれしく思っております。

    サンプルで紹介しているスクリプトでは
    小数点での数値に対してはもともと想定しておりませんでしたので
    スクリプトを調整して小数点第一位までの値でカウントアップさせるパターンの
    サンプルを用意してみましたので下記URLからご確認ください。
    http://black-flag.net/devel/jQueryNumberCountUp/jQueryNumberCountUpDecimal/

    ファイルは一式下記からダウンロードできます。
    http://black-flag.net/devel/jQueryNumberCountUp/jQueryNumberCountUpDecimal.zip

    小数点第一位以下も表示する場合は
    スクリプト内の「countTimer」内をご参照いただき
    調整していただければと思います。

    よろしくお願いします。

    返信
  • 2018年5月31日 @ 10:59 AM
    パーマリンク

    ありがとうございます。
    小数点がある場合は次回からこの実装を使ってみたいです。

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です