こんにちは。工藤です。
今回はSVGアニメーションを気軽に作成できるLazy Line Painterについてご紹介します。
サイト Github
目次
1.jQuery本体とjquery.lazylinepainterを読み込ませよう
|
1 2 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="./jquery.lazylinepainter-1.7.0.js"></script> |
とりあえずはjQuery本体とGithubからダウンロードした『jquery.lazylinepainter』を読み込ませます。
2.SVG画像を読み込ませてサイト上からコードを作成
サイトをスクロールした箇所にSVG画像を読み込ませるエリアがあります。そちらにillustratorなどで作成したSVG画像を読み込ませます。
ちなみに色付き画像を作成してもこちらは全て線画でアニメーションを作成するので、色付きとなると自分でカスタマイズの必要があります。
今回は上記の画像を読み込ませます。
コードを取得してくれました。
こちらを最初に読み込ませたjquery.lazylinepainterの下に読み込ませます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
/* * Lazy Line Painter - Path Object * Generated using 'SVG to Lazy Line Converter' * * http://lazylinepainter.info * Copyright 2013, Cam O'Connell * */ var pathObj = { "heart": { "strokepath": [ { "path": "M177.5,286L26,134.5C-3.6,104.9-3.6,56.8,26,27.2c29.6-29.6,77.7-29.6,107.3,0l44.2,44.2l44.2-44.2 c29.6-29.6,77.7-29.6,107.3,0c29.6,29.6,29.6,77.7,0,107.3L177.5,286z", "duration": 600 } ], "dimensions": { "width": 358, "height": 290 } } }; /* Setup and Paint your lazyline! */ $(document).ready(function(){ $('#heart').lazylinepainter( { "svgData": pathObj, "strokeWidth": 10, "strokeColor": "#e09b99" }).lazylinepainter('paint'); }); |
IDを変更
|
1 |
$('#heart').lazylinepainter( |
上記の箇所は最初にコードを取得した際に
|
1 |
$('#undefined').lazylinepainter( |
のように表示されていますが、『#undefined』の部分は
|
1 2 |
var pathObj = { "heart": { |
の記述の『heart』に合わせましょう。今回の場合なので適宜あわせてください。
線のデザインを変更
|
1 2 |
"strokeWidth": 10, "strokeColor": "#e09b99" |
この部分は線の太さと色を変えることができます。最初は線の太さが2だったのを10に変更しました。
その他にもオプションはありますのでGitHubを参考にしてみてください。
style="display:block"
data-ad-client="ca-pub-4667789978705365"
data-ad-slot="9480048027"
data-ad-format="auto">
3.HTMLに表示させるエリアを追加
あとは簡単です。HTMLにSVGアニメーションを表示させるエリアを作成しましょう。|
1 2 |
<div id="heart"> </div> |
サイズなどは必要に応じてcssで調整します。
|
1 2 3 4 |
#heart{ width: 358px; height: 290px; } |
これで完成です！
DEMO
だいぶ簡単にできますので、SVGアニメーションの入口として試してみてください。
