odometer.jsで数字をカウントさせながら表示する

おはようございます。
秋雨前線で毎日雨です…洗濯物が乾かなくて嫌になりますね（ガーン）

 

雨だと出かける予定もなくなるので、ブログに専念できます。笑

 

今回はタイトルの通り数字をくるくる回転させながらカウント表示させるodometer.jsをしてみました。

また、ページ内で複数実装したときに、特定の要素がスクロール範囲に入った時にodometer.jsを実行する、
という操作をしてみました。

 

odometer.jsの実装方法

数字をくるくる回転させながらカウント表示させるodometer.jsの公式サイトはこちらです。
実際にいろんな動きができるので見てみると楽しいと思います。
【URL】公式サイト

実装方法は以下の通りです。

 

内に、公式サイトからダウンロードしたJSとCSSを読み込みます。
CSSは好みのものを選択して入れてください。

 


<link href="https://creatornote.nakweb.com/wp-content/themes/giraffe/css/odometer-theme-default.css" rel="stylesheet" type="text/css" >

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://creatornote.nakweb.com/wp-content/themes/giraffe/js/odometer.min.js"></script>

//※https://creatornote.nakweb.com/wp-content/themes/giraffe/cssやhttps://creatornote.nakweb.com/wp-content/themes/giraffe/js
は自分のパスに置き換えてくださいね！

 

HTMLは単純なもの。回転させたいタグに[class=”odometer”]を付与します。

 


<div class="math_list05">
  <p class="mfsz"><span class="odometer" id="odo01">000</span><i>人</i><p>
</div>

 

上記のコードの000は開店前の初期値を入れておきます。
好きな数字を入れて大丈夫ですよ！

 

最後にJSの記載をすれば回転してくれます。


$(document).ready(function() {
setTimeout(function(){
$('#odo01').html(70);
}, 1000);
});

 

#odo01の部分は設定したIidまたは.odometerのままでもOKです！

html(70);の部分に、最終的に表示させたい数値を入力してください。

 

これで完了です！

あっという間に実装できました～。

 

特定の要素がスクロール範囲に入った時にodometer.jsを実行する

ページ内のいくつかの場所で使用する場合、上記のJSの記述方法だと、ページ下部のほうに設定したodometer.jsがすでに
実行されて終わってしまっています。

なのでスクロールして特定の要素がスクロール範囲に入った時にodometer.jsを実行する方法を記載しておきます。
まぁ自分のための備忘録なんですけどね笑

 


$(function() {
	// 引き金となる要素を設定
	var triggerNode = $(".math_list05");
	 // 画面スクロール毎に判定を行う
	$(window).scroll(function(){
		// 引き金となる要素の位置を取得
		var triggerNodePosition = $(triggerNode).offset().top;	
		// 現在のスクロール位置が引き金要素の位置より下にあれば‥
		if ($(window).scrollTop() > triggerNodePosition - 200) {
			// 動かすJSの指示
	$('#odo01').html(70);
		}
	});
});

 

このコードをこのままコピーして使ってもらえれば使用できます！
もちろ、.math_list05やidとhtml(70)の部分は自分の好きなものに変更して下さいね。

みなさまもお試しあれ！

Share: