今日の人気記事

  1. 画像の拡大・縮小と移動(パン)「pan and zoom 」
  2. 縦・横にスクロールするテレビのようなニューステロップ「TV Credits」
  3. 検索/ソート/ページャー/フィルター付きのテーブル「Bootgrid」
  4. 画像を切り替えるだけのシンプルなスライド「simpleSlide」
  5. マウスオーバーで画像を拡大(ズーム)「EasyZoom」

アニメーション効果付きの棒グラフを作成「Thermometer」

スポンサーリンク

アニメーション効果付きの棒グラフを作成するプラグイン「Thermometer」を紹介します。

jQueryプラグイン「Thermometer」

このプラグインを使えば、ページロードとともに棒グラフが指定した数値まで、びよ~んと動く棒グラフが作成できます。

また、アニメーションの速度を指定することができるので、便利です。さらに、横棒グラフだけではなく、縦棒グラフもつくれるのでおすすめ!

スポンサーリンク

デモでは、さまざまな速度の棒グラフアニメーションが楽しめます。

「Thermometer」のデモ

ソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Thermometer のデモでーす。">
<title>Thermometer - jQuery Plugin Demo</title>
<style>
.thermometer-outer {
  margin: 20px auto;
  background: #c4f0ff;
  border: 1px solid #c4c4c4;
  border-radius: 3px;
}
.thermometer-outer-h {
  height: 20px;
  width: 100%;
}
.thermometer-outer-v {
  height: 200px;
  width: 20px;
}
.thermometer-inner {
  background: #3f83f7;
}
.thermometer-inner-h {
  height: 20px;
}
.thermometer-inner-v {
  width: 20px;
}
</style>
</head>
<body>
<h1>Thermometerのデモでーす。</h1>
<div class="thermometer" data-percent="100" data-speed="400"></div>
<div class="thermometer" data-percent="90" data-speed="600"></div>
<div class="thermometer" data-percent="80" data-speed="800"></div>
<div class="thermometer" data-percent="70" data-speed="1000"></div>
<div class="thermometer" data-percent="60" data-speed="1200"></div>
<div class="thermometer" data-percent="50" data-speed="1400"></div>
<div class="thermometer" data-percent="40" data-speed="1600"></div>
<div class="thermometer" data-percent="30" data-speed="1800"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.thermometer.js"></script>
<script>
$(document).ready(function() {
  $('.thermometer').thermometer();
});
</script>

<footer style="margin-top:20px">
<a href="https://webkaru.net/jquery-plugin/thermometer/">「jQueryプラグインまとめ」に戻る</a>
</footer>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)