SVG今やCSSだけでも多彩なアニメーションを取り入れることができますが、JavaScriptとSVGを使うことで、より美しく自由度のきく表現が可能です。今回はSVGを使った、便利なJavaScriptライブラリーやjQueryプラグインを紹介します。CodePen.Webサイト|GitHub|デモSVGのパスを使ってラインをアニメーションさせるためのプラグイン。デモ画面右下の「RETURN」ボタンをクリックして試してみてください。$('#my_svg_element').drawsvg();で要素を指定し、mySVG.drawsvg('animate');で実行させるだけの手軽さ。オプションを指定してスクロールする毎にラインを描くといった効果も実装できます。PainterWebサイト・デモ|GitHub昔からあるラインアートのプラグイン。レスポンシブにも対応とのこと。アニメーションの表示方法など、様々なオプションが用意されています。WebサイトにはSVGをラインアートに変換するためのジェネレーターも用意されています!SVGファイルをドロップすれば、すぐにアニメーションとともにSVGが表示され、コードも生成されます。vivusWebサイト・デモ|GitHub複数のパスを同時に、少し遅らせて、またはひとつひとつ描いていけます。Webサイトで表示方法や動きを確認できますよ。myCallback);JavaScriptでidを指定して実行。WalkwayWebサイト|GitHub|デモこちらは上記のプラグインに比べるととってもシンプル。オプションも遅延とイージング指定のみですが、これだけでも十分きれいなラインアートが描けます。}).draw();};Webサイトのデモではこんな感じでJavaScriptが書かれています。オプションの値はお好みで変更してください。ChartistWebサイト|GitHub|デモ折れ線グラフや棒グラフ、円グラフなど、様々な形態のグラフを実装できます。レスポンシブやアニメーションにも対応しており、より豊かに、わかりやすく表示できます。}});例えば3つのチャートを表示するなら、ラベルとそれに付随する値を記述すればOK。デモページにてサンプルグラフとコードが紹介されているので、思い通りの表現が手軽にできるでしょう。xChartsWebサイト|GitHub|デモ折れ線グラフ、棒グラフが作成できます。ドキュメントも豊富でカスタマイズしやすいです。'#myChart');JavaScriptはラベルや値を指定し、グラフの種類とIDを指定して実行。ChartWebサイト|デモこちらはドーナツグラフ専用。ローディング中やホバー時のアニメーションがおもしろいです。id="svg"></svg>ファイルを読み込ませた後、HTMLにはSVG要素を追加するだけ。}];JavaScriptには値とラベル、色を必要なだけ追加すれば完成。BarWebサイト|デモパーセンテージとともに円グラフを表示します。ドーナツグラフやアニメーションにも対応。進歩状況を表すのに最適ですね。%HTMLで数値を記述。$(".demo").progressPie();})JavaScriptはこれだけでOK。オプションで色やグラフのスタイルを変更したり、アニメーションを加えられます。デモページで様々な形態のグラフをコードとともに閲覧できるので、参考にしてみてください。RipplerWebサイト・デモ|GitHubボタンをクリックすると、クリック地点から波紋が広がるようなエフェクト。JavaScriptとCSSファイルを読み込み、付随するクラスを付けてHTMLを記述。button</button>あとはスクリプトを呼び出せばOK。$(".rippler").rippler();});オプションではエフェクトの大きさや時間の長さを変更できます。Yo!Webサイト・デモ|GitHub星評価を実装できるスクリプト。Webサービスなどと併用して使えそうです。id="rateYo"></div>JavaScriptではクラスかidを指定するだけでデフォルトの星評価が実装できます。$("#rateYo").rateYo();});オプションで星の数やサイズ、色などの装飾も変更可能。PathWebサイト|デモSVGのパス上をオブジェクトが動きます。デザインのポイントに使えそうです。ファイルを読み込んだらHTMLに軌道のパスを記述。動かしていますが、画像など自由に変更可能。id="box"></div>JavaScriptにも同様にパスを記述して、オブジェクトが移動する速さやタイミング、動作方法を記述すればOK。loop();});SVGとJavaScript、CSSを組み合わせれば、様々な表現が可能ですね!素敵なエフェクトを追加して、より楽しめるWebサイトを作っていきましょう!毎度のことながら、また中途半端な数字になってしまった...。HTML.http://jobsnotice.in/mcaer-pg-provisional-1st-merit-list-counselling-allotment-result-admission/ニュースレターWeb制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。中の人ってこんな人Webデザイナー+WebデベロッパーのManaです。日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。カナダやオーストラリア、イギリスの企業でWebデザイナーとして働きました。詳しく知りたいという方は詳細ページへ。@chibimanaでつぶやいてます。Webクリエイターボックス。