VAに使えそうな画像切替jQueryプラグイン「Awkward Viewline」

昨今VAで画像を切り替えるのが多くなっていますが、Awkward Viewline -- A jQuery Pluginを使用するとウィンドウ幅100%で画像切替が可能になり、印象的なVAが導入できそうです。
VAに使えそうな画像切替jQueryプラグイン「Awkward Viewline」

使用方法
Awkward Viewline -- A jQuery Pluginからファイル一式をダウンロード。
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jquery.viewline.js" type="text/javascript"></script>
<script>
$(function () {
$("#id名").viewline({
auto_play: true, //自動再生
interval: 4000, //遷移間隔
pauseonover: true, //マウスオーバーで停止
animation: 'dropdown', //キャプションアニメーション
animation_in: 250, //アニメーション速度 in
animation_out: 150, //アニメーション速度 out
animation_delay: 300 //アニメーションタイミング
});
});
</script>

CSSは#viewlineについて適宜必要ものを抜粋・変更して記述下さい。
最後に画像を下記のように書けば完成です。
<div id="id名">
<div>
<img src="画像パス1" />
<span class="caption">キャプション1ここ</span>
</div>
<div>
<img src="画像パス2" />
<span class="caption">キャプション2ここ</span>
</div>
<!-- 以下画像分 -->
</div>

Awkward Viewline - Demo #2のようにウィンドウ幅100%でなくても可能です。

VAに使えそうな画像切替jQueryプラグイン「Awkward Viewline」

sponsors

「VAに使えそうな画像切替jQueryプラグイン「Awkward Viewline」」をシェアする

記事作成:
記事URL:

TOP > > > VAに使えそうな画像切替jQueryプラグイン「Awkward Viewline」