テンプレートにパララックス効果を取り入れる。その2:アウトラインを表示していく vivus.js(2019/12/04)

Illustratorなどで作ったSVGデータを使って、アウトラインを拾っていくパララックス効果です。
※古いブラウザでは表示されません。

vivus.jsを使ったテンプレート

2019/12/04時点では、tp_band1tp_clinic3になります。
うまく編集できない場合は参考にしてみて下さい。

vivus.jsを海外の配布サイトよりダウンロードしてきて下さい

パララックス効果を出す為のjsファイルが必要です。
弊社マニュアルに沿って、vivus.jsをダウンロードし、お手元のテンプレートのjsフォルダに移動します。

htmlのhead内に以下のタグを追加します

<script src="js/vivus.js"></script>

SVGデータを用意して下さい。

IllustratorでSVGデータを出力する方法。
タグを出力できたら、テンプレートのhtml内にコピペします。このタグがある部分でアニメーションが展開されます。

htmlの下の方に以下のタグを追加します


「150」の数字を変更するとアニメーション速度も変化します。

cssファイルに以下のタグを追加します。


「stroke」はアウトラインの色です。
「stroke-width」が幅。あまり大きくするとおかしくなりますが、2や3にすると太く変化します。
「width」はお好みで調整して下さい。

うまくできない場合は

サポート掲示板からご質問下さい。