数字をカウントアップするjQueryプラグイン「jquery.counterup」

MARKLEAPS

2021.07.01

企業のサイトなどで見かける、
設立0000年！　売上数 0000件！　シェア00％！
のように数字をカウントアップするアニメーションをjQueryで実現する方法をご紹介します。

DEMO

jQueryプラグインのダウンロード

GitHub からzipファイルをダウンロードします。

jquery.counterup / GitHub

jquery.counterup-master.zip を解凍し、その中のjquery.counterup.min.jsを使用します。

jQueryプラグインの読み込み

以下を<head>内に読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>

1 2	<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script> <script src="js/jquery.counterup.min.js"></script>

js/　はjquery.counterup.min.jsのアップ先ディレクトリに応じて書き変えてください。

指定の数字をカウントアップさせる

カウントアップさせたい数字を以下のように囲みます。

・html

<span class="count">1000</span>

1	<span class="count">1000</span>

カウントアップさせるための命令を<head>内に記述します。

<script>
jQuery(document).ready(function($){
  $('.count').counterUp({
    delay: 10, //開始までの遅延
    time: 1000 //カウントアップ終了までの時間
  });
});
</script>

jQuery(document).ready(function($){

$('.count').counterUp({

delay: 10, //開始までの遅延

time: 1000 //カウントアップ終了までの時間

});

</script>

よく読まれている関連記事

[JavaScript] 特定の曜日にだけ要素を表示する方法

数字をカウントアップするjQueryプラグイン「jquery.counterup」

jQueryプラグインのダウンロード

jQueryプラグインの読み込み

指定の数字をカウントアップさせる

よく読まれている関連記事

[JavaScript] 特定の曜日にだけ要素を表示する方法

関連最新記事

[JavaScript] 超入門：データ型を基礎から理解！文字列・数値・配列・オブジェクトをやさしく解説

[JavaScript] 超入門：letとconstの違いと使い分けをやさしく解説

[JavaScript] 超入門：JavaScriptにおける変数と定数とは？

[JavaScript] 超入門：JavaScript とは？初心者にもわかる『Webページに動きをつける』基本

社内風景

社内風景2