画像とjQueryだけでグラフにアニメーションをつけてみた

こんにちは、デザイナーのスギヤマです。
この間の雪を降らせるJSが一部で好評だったので、引き続きJSな記事を書いてみます。

サイトを作ってるとグラフなど、インフォグラフィックスを動的に表示して、インタラクティブなコンテンツにしたいといった要望は多々あると思います。
canvas要素を使って表現したりしますが、canvasが使えない（わからない）場合もあると思います。
なので、今回はcanvasを使わずに、画像とjQueryを使って、それっぽい動きのあるグラフを作ってみます。

サンプルコード

いかがでしょう？それっぽく動くグラフになっているかと思います。
今回は、CSSのoverflow:hiddenとjQueryのanimate()関数を利用しています。
以下で簡単に説明していきます。

動きをつける単位で、グラフを画像パーツに分割する

グラフのデザインデータは、psdなどでもらえる場合が多いと思うので、以下のように動きをつける単位で分割していきます。
この時、画像の高さと幅を全て揃えておくことがポイントです。
こうすることで、全ての画像の基準点が同じになるので、動かしやすくなります。
何より、CSSで要素の位置の調整が不要になるので楽に進められます。
（画像のサイズに制限があったりする場合は、この限りではありません。）

HTML/CSSで分割した画像を１つのグラフにする

先ほど分割した画像をHTMLとCSSを用いて１つのグラフにしていきます。
コードはサンプルコードを見て頂くとして、解説が必要なもののみ簡単に説明します。

CSS 21行目

.image-box.graph > span.info-graph2 {
  ...
  height: 2px;
　...
}

高さを2pxにしています。
これは高さを0pxにした場合は幅も0になる為、
アニメーションする時に横方向へ広がるアニメーションも起こってしまいます。
この防止策として、意図的に高さを少し与えて横幅が維持されるようにしています。

CSS 26行目

.image-box.graph > span.info-graph2 {
  ...
  background-position: left bottom;
}

background-positionを使い、棒グラフを下端に固定します。
こうすることで、高さが変化しても棒グラフの位置は変わらないので
棒グラフが下から伸びるように見せる事ができます。

CSS 28行目以降

.image-box.graph > span.info-graph3 {
  display: block;
  opacity: 0;/*初期状態で非表示にする為、透明度を0にします*/
}
.image-box.graph > span.info-graph4 {
  display: block;
  width: 0px;/*初期状態で非表示にする為、幅を0にします*/
}
.image-box.graph > span.info-graph5 {
  display: block;
  opacity: 0; /*初期状態で非表示にする為、透明度を0にします*/
}

その他、各要素のアニメーションの初期状に合わせて、幅を0pxに設定したり、透明度を0に設定したりします。
また、必要に応じて、z-indexで重ね順を調整すると良いでしょう。

animate()関数を使い、幅や透明度を元に戻す

アニメーションをさせる為のコードを書いて行きます。
ここでもコードはサンプルコードを見て頂くとして、解説が必要なもののみ簡単に説明します。

JS 5行目

$('.info-graph2').animate(
  {'height': '505px'},
  400,
);

400msで棒グラフの画像の表示高を元に戻して、グラフが上に伸びるように表示させています。
グラフの伸びる速度を調整する場合は、animate()関数の第2引数の数値を変更する事で調整できます。

JS 13行目

setTimeout(function(){
  $('.info-graph3').animate(
    //400msでfade-inさせます。
    {opacity:'1'},
    400,
  );
},500);

400msで、２つの王冠マークをフェードインさせます。
また、フェードインのタイミングを細かく調整したかったので、setTimeout()関数を利用しています。
棒グラフの表示アニメーション終了後にフェードインを行いたい場合は、１つ前のanimate()関数の第3引数completeにこの処理を入れる事で対応できます。

JS 21行目

setTimeout(function(){
  $('.info-graph4').animate(
    //600msで矢印の画像の表示幅を元に戻して表示させます。
    {'width': '601px'},
    600,
    function(){
      //吹き出しのフェードイン
      //(ここは終了後に実行したいので、引数completeを使う方向で調整しています)
      $('.info-graph5').animate(
        //800msでfade-inさせます。
        {opacity:'1'},
        800,
      );
    }
  );
},750);

600msで、矢印が左から右へ伸びるアニメーションを行い、
その後、800msで、吹き出しをフェードインさせます。
ここでは、animate()関数の第3引数に吹き出しのフェードイン処理を入れ、一番最後に表示されるようにしています。

まとめ

いかがでしたでしょうか？
今回はoverflowとjQueryのanimate()関数を利用して、グラフをそれっぽく動かしてみました。
応用する事で、他にもユニークなアニメーションの実装ができそうです。
機会があれば、ぜひ試して見てください。

デザインに関するお問い合わせ

キャンペーンサイトやメディアサイト、コーポレートサイト制作など、幅広く対応致します。デザインに関するお問い合わせ、ご相談は下記ページより承っております。お気軽にお問い合わせください。

URL: https://design.bpsinc.jp