Javascript

【数字で見る】JavaScriptライブラリを使ってよくあるUIを実装する

企業サイトを制作していると、「数字で見る◯◯」というページを作ることがあります。

イケてるサイトだと JavaScriptでアニメーションを効かせてグラフを描画したり、テキストを表示させたりしています。

 

例えば、下記のようなサイトですね。

 

駆け出しコーダーがいきなりこのような案件を任されてしまうと、テンパってしまうかもしれませんが、、

JavaScriptライブラリを使えば簡単にイケてるアニメーションを実装することができます。

 

「数字で見る」を実装するライブラリ

 

まずはデモをご覧ください。

 

すみません、デザインは適当です。

アニメーションの雰囲気は伝わったかと思います。

 

難しそうに感じますが、下記のライブラリを使えば簡単に実装できますよ。

 

Chart.jsでグラフ描画する

今回は円グラフを描画しましたが、Chart.jsを使えばどんなグラフでも簡単にアニメーションさせることができます。

 

公式ドキュメントを見れば、詳しく実装方法が書かれていますので、いろんなグラフを実装したい方は色々みてみてください。

 

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<canvas id="myChart"></canvas>

 

JavaScript

$(function () {

  var ctx = document.getElementById("myChart").getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      datasets: [{
        data: [75.6, 24.4],
        backgroundColor: ['#F89174', '#329AF0'],
        borderWidth: [0, 0],
      }]
    },
    options: {
      responsive: true,
      cutoutPercentage: 35,
      tooltips: {
        enabled: false,
      },
      animation: {
        duration: 1500
      },
    }
  });

 

 

odometerでテキストを回転させる

 

公式サイトodometerで必要ファイルをダウンロードします。

cssファイルとjsファイルを読み込みましょう。

<link rel="stylesheet" href="/css/odometer-theme-default.css">
<script src="/js/odometer.min.js"></script>

 

単純にodometerを使ってアニメーションさせるには、HTMLにクラスを付与し、JavaScriptで実行するだけ。

 

HTML

<div class="odometer"></div>

 

JavaScript

$('.odometer').html(123)
//123は最終的に表示したい数字を入れる

 

これだけで数字をアニメーションさせることが可能ですが、このままではページが読み込まれたときに実行されてしまいます。

スクロールに連動してアニメーションさせる簡単な方法が、ScrollMagicです。

 

ScrollMagicでスクロール連動させる

スクロール連動させるには、ScrolMagicを使うのが簡単です。

 

まずはHTMLで読み込み

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>

 

ScrollMagicの流れとしては、

  1. 予めアニメーション用のクラス名を作成
  2. トリガーの要素がある位置に到達したら発火する

こんな感じです。

 

まずは CSS

.js-scroll-fade {
  opacity: 0;
  -webkit-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
}
.js-scroll-fade.animated {
  opacity: 1;
}
.js-scroll-scale-in {
  -webkit-transform: scale(1.04) translateY(0);
  -ms-transform: scale(1.04) translateY(0);
  transform: scale(1.04) translateY(0);
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
  opacity: 0;
}
.js-scroll-scale-in.animated {
  opacity: 1;
  -webkit-transform: scale(1) translateY(0);
  -ms-transform: scale(1) translateY(0);
  transform: scale(1) translateY(0);
}
.js-scroll-scale-in-big {
  -webkit-transform: scale(0.5) translateY(0);
  -ms-transform: scale(0.5) translateY(0);
  transform: scale(0.5) translateY(0);
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  opacity: 0;
}
.js-scroll-scale-in-big.animated {
  opacity: 1;
  -webkit-transform: scale(1) translateY(0);
  -ms-transform: scale(1) translateY(0);
  transform: scale(1) translateY(0);
}
.js-scroll-fade-up-in {
  opacity: 0;
  -webkit-transform: translate3d(0, 10px, 0);
  transform: translate3d(0, 10px, 0);
  -webkit-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
}
.js-scroll-fade-up-in.animated {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.js-scroll-r-to-l {
  -webkit-transform: translate(40px, -40px);
  -ms-transform: translate(40px, -40px);
  transform: translate(40px, -40px);
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  opacity: 0;
}
.js-scroll-r-to-l.animated {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

 

 

.animatedというクラスでアニメーションの制御をする感じです。

アニメーションさせたい要素に上記のクラス名をつけ、以下のようにJSを記載します。

 

JavaScript

$(function () {
  var controller = new ScrollMagic.Controller();

  $('.js-scroll').each(function () {
    var obj = this;
    var $obj = $(this);
    var scene = new ScrollMagic.Scene({ triggerElement: this, triggerHook: .8, })
      .on('enter', function () {
        $obj.addClass('animated');
      })
      //        .addIndicators()
      .addTo(controller);
  });
});

 

こんな感じで記載すれば、スクロールした要素がtriggerHook .8の地点に到達したときにアニメーションが発火します。

 

そこで、odometerをスクロール発火したい場合は、以下のようにするとオッケーですね。

$(function () {
  var controller = new ScrollMagic.Controller();

  var scene = new ScrollMagic.Scene({ triggerElement: '#odo01', triggerHook: .9 })
    .on('enter', function () {
      $('#odo01').html(603);
    })
    .addTo(controller);
});

 

 

こんな感じで、odometerやChart.jsとScrollMagicを組み合わせることで、簡単にアニメーションを実装することが可能です。

今回は、限定的な機能しか紹介していませんが、もっと詳しく知りたい人は、公式サイトをご覧ください。