今日の人気記事

  1. Google Mapsの地図を簡単に表示「jQuery Google Map」
  2. 横方向のスライダー「Scrollyeah」
  3. JSONデータからテーブルを表示「Columns」 - ソート - 検索 - ページャー
  4. 画面の端についてくるメニューを設置「mb.extruder」
  5. 画像に拡大・縮小ボタンを「Zoomer」

SVGファイルからパスアニメーションを作成「Lazy Line Painter」

スポンサーリンク

Illustratorなどのグラフィックソフトで作成したSVG(Scalable Vector Graphics)ファイルから、パスアニメーションを作成するjQueryプラグイン「Lazy Line Painter」を紹介します。

jQueryプラグイン「Lazy Line Painter」

これがなかなかおもしろい!プラグインなので、早速、管理人もSVGファイルから作成してみました。デモをご覧ください。

スポンサーリンク

「Lazy Line Painter」のデモ

絵心ゼロ……。でも、おもしろいですね!

さて、気を取り直して「つくり方」をみてみましょう。

つくり方

1. SVGファイルを作成
「Illustrator」などのSVG形式に対応しているグラフィックソフトで、SVGファイルを作成します。

2. SVGファイルをjQueryコードへ変換
lazy-line-converter
Lazy Line Painter」へアクセスし、SVGファイルをjQueryコードへ変換します。

3. 変換したjQueryコードとプラグインからページを作成

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="Lazy Line Painterのデモでーす。">
<meta name="robots" content="noindex, nofollow">
<title>Lazy Line Painter - jQuery Plugin Demo</title>
<style>
#illust {
  margin: 0 auto;
} 
</style>
</head>
<body>
<h1>Lazy Line Painterのデモでーす。</h1>
<div id='illust'></div>

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="js/jquery.lazylinepainter-1.4.1.min.js"></script> 
<script src="js/illust.js"></script> 
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)