About
ワイヤーフレーム風の線画のアニメーションを追加できるプラグインです。
再生するたびに線の長さや塗りつぶし箇所がランダムに表示されます(オプションで細かい設定が可能)。
- htmlの要素に合わせてアニメーション
- どの要素をアニメーションさせるか設定可能
- 自動再生のオン/オフが可能
- その他、多彩(すぎる)オプション設定
- コールバックによるイベント制御
- Chrome, Firefox, Safari, IE11以上推奨
もう一度再生
※このプラグインを実行するには「jQuery」「Transit.js」「CreateJS」が必要です。
How To Use
1. wireview.jsをダウンロードする
2. headタグを記述
jsとcssのディレクトリは保存した場所に合わせて、適宜変更してください。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://code.createjs.com/createjs-2015.05.21.min.js"></script>
<script src="assets/js/plugins/jquery.transit.min.js"></script>
<script src="assets/js/jquery.wireview.js"></script>
<link rel="stylesheet" type="text/css" href="asset/css/jquery.wireview.css" />3. jsを記述
$(function() {
$('section, div').wireview();
});Notice
CSS上の注意
z-indexを多用しているサイトだと高確率で表示がおかしくなります。
オプション回りの注意
オプションのisScrollをtrueにするとアニメーション位置がずれることがあります。false推奨です。
オプションのisHoverの動作は不安定です（主にz-index周り）。false推奨です。
アニメーション前に一瞬画面が表示されてしまう場合
対処法は色々ありますが、cssに下記記述を追加するのが手っ取り早いです。
body {
visibility: hidden;
}
※プラグインを使っていないページでも上記記述をしてしまうと、ページが真っ白のままになるのでご注意ください。
スマホ表示について
スマホだとものすごく重いです。
canvasのサイズをPC画面と同等の大きさで設定してしまっているため、負荷がかかってしまっているものと思われます。
いつか修正します。
License
MITライセンスに基づき、無償で利用できます。
なお、本プラグインで発生した問題については対応できかねますので、自己責任でご利用ください。