アニメーションやグラフ等、SVGを使ったJavaScript&jQueryプラグイン11

今やCSSだけでも多彩なアニメーションを取り入れることができますが、JavaScriptとSVGを使うことで、より美しく自由度のきく表現が可能です。今回はSVGを使った、便利なJavaScriptライブラリーやjQueryプラグインを紹介します。
ラインアート
1. DrawSVG
See the Pen Simple usage by Leonardo Santos (@lcdsantos) on CodePen.
SVGのパスを使ってラインをアニメーションさせるためのプラグイン。2kbと軽量です。デモ画面右下の「RETURN」ボタンをクリックして試してみてください。
var mySVG = $('#my_svg_element').drawsvg();
で要素を指定し、
mySVG.drawsvg('animate');
で実行させるだけの手軽さ。オプションを指定してスクロールする毎にラインを描くといった効果も実装できます。
2. Lazy Line Painter
昔からあるラインアートのプラグイン。レスポンシブにも対応とのこと。線種や色、透明度、遅延、アニメーションの表示方法など、様々なオプションが用意されています。
WebサイトにはSVGをラインアートに変換するためのジェネレーターも用意されています!SVGファイルをドロップすれば、すぐにアニメーションとともにSVGが表示され、コードも生成されます。とっても便利ですね!(適当なサンプル画像で申し訳ない)
3. vivus
複数のパスを同時に、少し遅らせて、またはひとつひとつ描いていけます。Webサイトで表示方法や動きを確認できますよ。
<svg id="my-svg"> <path...> <path...> <path...> </svg>
こんな感じでHTMLに複数のパスを記述した後、
new Vivus('my-svg', {duration: 200}, myCallback);
JavaScriptでidを指定して実行。オプションが必要であれば記述して完成です!
4. Walkway
こちらは上記のプラグインに比べるととってもシンプル。オプションも遅延とイージング指定のみですが、これだけでも十分きれいなラインアートが描けます。
window.onload = function () { var svg = new Walkway({ selector: '#example', easing: 'easeInOutCubic', duration: 2100 }).draw(); };
Webサイトのデモではこんな感じでJavaScriptが書かれています。オプションの値はお好みで変更してください。
グラフ
5. Chartist
折れ線グラフや棒グラフ、円グラフなど、様々な形態のグラフを実装できます。レスポンシブやアニメーションにも対応しており、より豊かに、わかりやすく表示できます。
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
折れ線グラフ、棒グラフが作成できます。ドキュメントも豊富でカスタマイズしやすいです。
<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
こちらはドーナツグラフ専用。ローディング中やホバー時のアニメーションがおもしろいです。
<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
パーセンテージとともに円グラフを表示します。ドーナツグラフやアニメーションにも対応。進歩状況を表すのに最適ですね。
<span class="demo">70</span> %
HTMLで数値を記述。
$(function() { $(".demo").progressPie(); })
JavaScriptはこれだけでOK。オプションで色やグラフのスタイルを変更したり、アニメーションを加えられます。デモページで様々な形態のグラフをコードとともに閲覧できるので、参考にしてみてください。
その他いろいろ
9. Rippler
ボタンをクリックすると、クリック地点から波紋が広がるようなエフェクト。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サービスなどと併用して使えそうです。JavaScriptとCSSを読み込んで、星評価を表示したい箇所に div
を挿入。
<div id="rateYo"></div>
JavaScriptではクラスかidを指定するだけでデフォルトの星評価が実装できます。
$(function () { $("#rateYo").rateYo(); });
オプションで星の数やサイズ、色などの装飾も変更可能。
11. Moves An Element Along A SVG Path
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サイトを作っていきましょう!
毎度のことながら、また中途半端な数字になってしまった…。
さすが面白い!
The object moves on the path of SVG. It seems to be used for the design point. When loading the file, describe the trajectory path in HTML.
http://jobsnotice.in/mcaer-pg-provisional-1st-merit-list-counselling-allotment-result-admission/