できるだけシンプルなサイトを作ろうとプラグインなどの類は極力避けていましたが、結局はなにかしらの動きが要る…ということがわかりました。というかそう思った。
ページが丸ごと動いたり、リンクがいちいち跳ねたり、世の中には楽しいウェブ・サイトがたくさんありますが、今回はできるだけ小さなもの——例えばサイトロゴなど——から手をつけてみました。
SVGのアニメーション
当サイトのロゴはSVG（Scalable Vector Graphics）で、しかも埋め込みです。これは画像を参照するという手間を省くためのもので、確実にミニマルな構成になりました。
またSVGはベクター・イメージなので、一応レスポンシブ・サイトであるこのサイトにも都合が良いのです。しかも、通常のビットマップ画像と違って、各要素のサイズや色などの変更が容易に行えます。
今回は、Lazy Line Painterを使ってアニメーションをしました。このプラグインはjQueryベースのもので、
次からは、実際に設置方法を説明します。
また、あらかじめSketchやIllustratorなどでSVGファイルを作っておきます。（またこれらは1000px x 1000px、40kB以下である必要があります。）
そして、同一のパスにしておくべきです。（Sketchならドラッグ&ドロップで可能。）
GitHubからダウンロードし、あるべき場所に置いておきます。
minバージョンのJSファイルと普通のJSファイル、jsonファイルがあります。
1.タグの配備
以下のコードを <body> タグの一番最後に追加します。
またJSファイルの位置はそれぞれの環境によって違います。
<script src="jquery-2.1.1.js"></script>
<script src="jquery.lazylinepainter-1.5.1.min.js"></script>
<script>
<!--- ここにコンバートしたスクリプトが入る --->
</script>
なおjQueryはver2以上でないと動作しませんでした。
2.SVGファイルをスクリプトに変換する
Lazy Line Painterの下の方にあるSVG TO LAZY LINECONVERTERを利用します。
自前のSVGファイルを「Click of Drop…」のところにぶち込みます。
するとLazy Line Painterで使えるスクリプトを作ってくれます。
（本来ならここで色調整などのスライダー群が出るはずですが、嫌われているのか出ませんでした。）
それを先ほどの<!--- ここにコンバートしたスクリプトが入る --->の部分に置き換えます。
3.コードの書き換え
スライダー群が出なかったせいで調整ができなかったので、コードを直接編集します。
/*
* Lazy Line Painter - Path Object
* Generated using 'SVG to Lazy Line Converter'
*
* http://lazylinepainter.info
* Copyright 2013, Cam O'Connell
*
*/
の部分はライセンス表示なので残しておきましょう。
var pathObj = {
"teletakt": {
"strokepath": [
{
"path": 〜, //SVGの中身
"duration": 5000 //速度。多いほど遅い。
}
],
"dimensions": { //表示するSVGのサイズ。単位はピクセル（px）。
"width": 100, //幅
"height": 100, //高さ
}
}
};
"path": 〜,の部分にあるコードは、SVGの<path>のものをまるまるコピーで使えます。
/*
Setup and Paint your lazyline!
*/
$(document).ready(function(){
$(' クラス名 ').lazylinepainter( //アニメーションを表示するクラスのID#やクラス名.を入れます
{
"svgData": pathObj,
"strokeWidth": 2, //SVG・線の幅
"strokeColor": "#3e5366" //SVG・線の色
}).lazylinepainter('paint');
});/*
ここには、 "delay": 1000,などの表記も使えます。
詳しくは、同封の"README.md"に書かれてあります。
まとめ
なんか謎のTumbler特有のもたつきがありますが、なんとか動いたので良しとしましょう。
GIFアニメなどで同じものを作るより、要素がそこにあるということで非常に安心できます。