動くWebデザイン
アイディア帳

動きを実現する仕組み

仕組み　⇒　SVG形式のベクターデータを利用して、CSS、JavaScriptを使って動かす。
長所　⇒　拡大縮小しても画質が劣化しない。
短所　⇒　制作ソフト、もしくはプログラムの知識が必要なので、導入にひと手間かかる

vivus.jsというライブラリを使用して、アウトライン化したテキストの上でマスク用のパスが動き、徐々にテキストを出現。
※サンプル9-4-2（※サンプルデータ：https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/move02/9-4-2/9-4-2.zip）のファイルをベースにしてsvgファイル、HTML、CSS、JavaScriptファイルの記述を上書きして作成。

[使用するライブラリ]
vivus.js(https://maxwellito.github.io/vivus/)

HTMLの書き方

【1. アウトライン化したテキストをSVG形式で書き出して保存】

Adobe Illustratorを使って下地となるアウトライン化したテキストをつくる。
※サンプルのイラストレーターのデータはアウトライン済み

1-1. テキストを書き、アウトライン化する。

新規ドキュメント作成（カラーモードRGB・サイズは問わない）→テキストを書く→テキストを選択→「書式」→「アウトラインを作成」

1-2. アウトライン化したテキストをSVG形式で9-4-2「svg」フォルダに保存し、既存のSVGと入れ替える。（ファイル名はtext.svgとする。）

テキストを右クリック→「選択範囲を書き出し」→アセットの名前をtextに変更。→書き出し先を9-4-2内の「svg」フォルダに指定。「サブフォルダーを作成」のチェックを外す。
フォーマット形式はSVG→「アセットを書き出し」

【2.マスク用のパスを描く】
※サンプルのイラストレーターのデータはパスを記載済み

2-1. 1で作成したアウトライン化したテキストが書かれたレイヤーに鍵をかけ、その上に新規レイヤーを作成。

2-2. 新規レイヤーを選択した状態で、ペンツールを使いアウトライン化したテキストを上からなぞる。
塗りはなし、線のみ。線の色は後から消すのでどんな色でも可。
なるべく一筆書きで書いた方がきれいなアニメーションになる。

2-3. テキストが隠れるように線の太さ、線端、角の形状を調整する。
※カーブが多いテキストの場合、線の形状を「線端」⇒「丸型線端」「角の形状」⇒「ラウンド結合」にし、丸みを帯びた形にすると隠れやすくなる。制作したファイルは3-1で使用。

【3.アウトライン化したテキストのSVGと、マスク用のパスをHTML上に読み込む】

※サンプルファイル9-4-2.htmlをベースに必要な箇所のみ修正してください。
Adobe Dreamweaverを使い、アウトライン化したテキストのSVGと、マスク用のパスをHTMLに読み込む。
＜HTMLの書き方＞

① head終了タグ直前に自作のCSSを読み込みます

<link rel="stylesheet" type="text/css" href="css/9-4-2.css">

</head>

② body終了タグ直前にvivus.js、動きを制御する自作のJavaScriptの2つを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.4/vivus.min.js"></script>

<!--自作のJavaScript-->

<script src="js/9-4-2.js"></script>

</body>

3-1マスク用のパスをSVG形式の文字列に変換する

Adobe Illustratorで作成したマスク用のパスの線の塗りを無しにして、パス全体を選択。
Ctrl（Command）＋Cでコピーをする。Adobe DreamweaverにCtrl（Command）＋Vでペーストすると、svgからはじまるソースコードに変換される。

3-2　ベースにするサンプルファイル9-4-2.htmlを開き、赤字部分のみを3-1で作成したファイルの値に差し替える。

①　3-1で作成したソースコードの width と height の値を赤字部分に差し替える（8か所）
※svgにid=”mask”が付与されていないとアニメーションをしないので注意！

②　<mask>～</mask>の間に 3-1で作成したソースコードの</style>以下</svg>の前までのソースコードを差し替える。（<defs></defs>は除く）
※<path>や<line>などのクラス名は全てclass=”st0″ に変更
※<path>や<line>などに直接 styleが指定されていたり、<style>にst0の色指定がされており、描画に影響が出る場合は記述を削除

3-3　CSSとJavaScriptファイルをレイアウトにあわせて修正する

SVGタグにつけられたid=”mask” に対してCSSとJavaScriptの設定を行う。

＜CSSの書き方＞

/*SVGのサイズ*/
svg{
	max-width:800px;/*SVGタグの横幅*/
	width:100%;/*レスポンシブ対応にするため100%を指定*/
	height:auto;
}

/*マスクをするパスの設定*/

#mask .st0{
    fill:none;
    stroke:#FFFFFF;/*マスクする線の色*/
    stroke-width:90;/*線の太さを指定する*/
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-miterlimit:10;
    stroke-dasharray: 1500; /* 線の間隔を指定する */
    stroke-dashoffset:1500; /* 線の位置を指定する */
}

＜JavaScriptの書き方＞

new Vivus('mask', {//svgに指定したid名
	type: 'scenario-sync',// アニメーションのタイプを設定
	duration: 130,//アニメーションの時間。数字が小さくなれば速くなり、大きくなれば遅くなる
	forceRender: false ,//パスが更新された場合に再レンダリングさせない
	animTimingFunction:Vivus.EASE_OUT,//動きの加速減速設定
});

この技術を使ったサンプルサイト

• 

  Sample10
  映画・音楽のエンタメ系サイト