今やCSSだけでも多彩なアニメーションを取り入れることができますが、JavaScriptとSVGを使うことで、より美しく自由度のきく表現が可能です。今回はSVGを使った、便利なJavaScriptライブラリーやjQueryプラグインを紹介します。

↑私が10年以上利用している会計ソフト！

ラインアート

1. DrawSVG

See the Pen Simple usage by Leonardo Santos (@lcdsantos) on CodePen.

Webサイト｜GitHub｜デモ

SVGのパスを使ってラインをアニメーションさせるためのプラグイン。2kbと軽量です。デモ画面右下の「RETURN」ボタンをクリックして試してみてください。

var mySVG = $('#my_svg_element').drawsvg();

で要素を指定し、

mySVG.drawsvg('animate');

で実行させるだけの手軽さ。オプションを指定してスクロールする毎にラインを描くといった効果も実装できます。

2. Lazy Line Painter

Webサイト・デモ｜GitHub

昔からあるラインアートのプラグイン。レスポンシブにも対応とのこと。線種や色、透明度、遅延、アニメーションの表示方法など、様々なオプションが用意されています。

WebサイトにはSVGをラインアートに変換するためのジェネレーターも用意されています！SVGファイルをドロップすれば、すぐにアニメーションとともにSVGが表示され、コードも生成されます。とっても便利ですね！（適当なサンプル画像で申し訳ない）

3. vivus

Webサイト・デモ｜GitHub

複数のパスを同時に、少し遅らせて、またはひとつひとつ描いていけます。Webサイトで表示方法や動きを確認できますよ。

<svg id="my-svg">
  <path...>
  <path...>
  <path...>
</svg>

こんな感じでHTMLに複数のパスを記述した後、

new Vivus('my-svg', {duration: 200}, myCallback);

JavaScriptでidを指定して実行。オプションが必要であれば記述して完成です！

4. Walkway

Webサイト｜GitHub｜デモ

こちらは上記のプラグインに比べるととってもシンプル。オプションも遅延とイージング指定のみですが、これだけでも十分きれいなラインアートが描けます。

window.onload = function () {
  var svg = new Walkway({
    selector: '#example',
    easing: 'easeInOutCubic',
    duration: 2100
  }).draw();
};

Webサイトのデモではこんな感じでJavaScriptが書かれています。オプションの値はお好みで変更してください。

グラフ

5. Chartist

Webサイト｜GitHub｜デモ

折れ線グラフや棒グラフ、円グラフなど、様々な形態のグラフを実装できます。レスポンシブやアニメーションにも対応しており、より豊かに、わかりやすく表示できます。

new Chartist.Line('.ct-chart', {
  labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
  series: [
    [12, 9, 7, 8, 5],
    [2, 1, 3.5, 7, 3],
    [1, 3, 4, 5, 6]
  ]
}, {
  fullWidth: true,
  chartPadding: {
    right: 40
  }
});

例えば3つのチャートを表示するなら、ラベルとそれに付随する値を記述すればOK。デモページにてサンプルグラフとコードが紹介されているので、思い通りの表現が手軽にできるでしょう。

6. xCharts

Webサイト｜GitHub｜デモ

折れ線グラフ、棒グラフが作成できます。ドキュメントも豊富でカスタマイズしやすいです。

<figure style="width: 400px; height: 300px;" id="myChart"></figure>

HTMLには figure タグで指定。

var data = {
  "xScale": "ordinal",
  "yScale": "linear",
  "main": [
    {
      "className": ".pizza",
      "data": [
        {
          "x": "Pepperoni",
          "y": 4
        },
        {
          "x": "Cheese",
          "y": 8
        }
      ]
    }
  ]
};
var myChart = new xChart('bar', data, '#myChart');

JavaScriptはラベルや値を指定し、グラフの種類とIDを指定して実行。グラフの種類は bar、cumulative、line、line-dotted から選択できます。

7. Animated Interactive Donut Chart

Webサイト｜デモ

こちらはドーナツグラフ専用。ローディング中やホバー時のアニメーションがおもしろいです。

<svg id="svg"></svg>

ファイルを読み込ませた後、HTMLにはSVG要素を追加するだけ。

var programmingSkills = [
    {
      value: 45,
      label: 'jQuery',
      color: '#3399FF'
    },
    {
      value: 35,
      label: 'JavaScript',
      color: '#FFC575'
    },
    {
      value: 20,
      label: 'Ruby',
      color: '#99CC00'
    }
];

JavaScriptには値とラベル、色を必要なだけ追加すれば完成。

8. Dynamic Pie Chart-style Progress Bar

Webサイト｜デモ

パーセンテージとともに円グラフを表示します。ドーナツグラフやアニメーションにも対応。進歩状況を表すのに最適ですね。

<span class="demo">70</span> %

HTMLで数値を記述。

$(function() {
      $(".demo").progressPie();
})

JavaScriptはこれだけでOK。オプションで色やグラフのスタイルを変更したり、アニメーションを加えられます。デモページで様々な形態のグラフをコードとともに閲覧できるので、参考にしてみてください。

その他いろいろ

9. Rippler

Webサイト・デモ｜GitHub

ボタンをクリックすると、クリック地点から波紋が広がるようなエフェクト。JavaScriptとCSSファイルを読み込み、付随するクラスを付けてHTMLを記述。

<button class="btn btn-primary rippler rippler-default" href="#">Nice button</button>

あとはスクリプトを呼び出せばOK。

$(document).ready(function() {
  $(".rippler").rippler();
});

オプションではエフェクトの大きさや時間の長さを変更できます。

10. Rate Yo!

Webサイト・デモ｜GitHub

星評価を実装できるスクリプト。Webサービスなどと併用して使えそうです。JavaScriptとCSSを読み込んで、星評価を表示したい箇所に div を挿入。

<div id="rateYo"></div>

JavaScriptではクラスかidを指定するだけでデフォルトの星評価が実装できます。

$(function () {
  $("#rateYo").rateYo();
});

オプションで星の数やサイズ、色などの装飾も変更可能。

11. Moves An Element Along A SVG Path

Webサイト｜デモ

SVGのパス上をオブジェクトが動きます。デザインのポイントに使えそうです。ファイルを読み込んだらHTMLに軌道のパスを記述。デモでは赤い div を動かしていますが、画像など自由に変更可能。

<svg>
        <path d="M 436.5 333.5 ..." fill="none" stroke="#fff" ></path>
</svg>
<div id="box"></div>

JavaScriptにも同様にパスを記述して、オブジェクトが移動する速さやタイミング、動作方法を記述すればOK。

$(function(){
    var a = new Motion($("#box"), {
        path: 'M 436.5 333.5 ...'
    });

    var loop = function(){
        a.to(1, {duration:10000,easing:'easeOutBounce'})
            .to(0, {duration:10000,easing:'easeOutQuint'})
            .to(.5, 2000)
            .to(.8)
            .to(.6)
            .to(.7)
            .to(0, {duration:3000, complete:loop});
    };
    loop();
});

SVGとJavaScript、CSSを組み合わせれば、様々な表現が可能ですね！素敵なエフェクトを追加して、より楽しめるWebサイトを作っていきましょう！

毎度のことながら、また中途半端な数字になってしまった…。