テンプレートにパララックス効果を取り入れる。その２：アウトラインを表示していく vivus.js（2019/12/04）
Illustratorなどで作ったSVGデータを使って、アウトラインを拾っていくパララックス効果です。
※古いブラウザでは表示されません。
vivus.jsを使ったテンプレート
2019/12/04時点では、tp_band1とtp_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」はお好みで調整して下さい。
うまくできない場合は
サポート掲示板からご質問下さい。