jQuery の Cycle プラグインを使い、上から下へスクロールするアニメーションで切り替わるスライドショーにおいて、アニメーションの動き方をjQuery Easing Pluginの「easeOutBounce」にする方法。上から下へスクロールするアニメーションで切り替えるようにするには、fx オプションに「scrollDown」か「scrollVert」を指定する。アニメーションの動き方に jQuery Easing Plugin の動き方を取り入れるには、easing オプションを使う。
実装例（サンプル）
実装例（サンプル）の動作について
5つの画像を、上から下へスクロールするアニメーションで、順番に表示する。
1つの画像の表示時間は、４秒。
上から下へスクロールするアニメーション動作時間は、１.５秒。
実装例（サンプル）のソースコード
読み込み
パスは、それぞれ、アップロードした場所を指定する。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
jquery と JQuery Cycle Plugin と jQuery Easing Pluginを読み込む。
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-cycle' ) .cycle( {
fx: 'scrollDown',
easing: 'easeOutBounce',
speed: 1500,
timeout: 4000,
sync: 1,
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-cycle' ) .cycle( {
fx: 'scrollDown',
easing: 'easeOutBounce',
speed: 1500,
timeout: 4000,
sync: 1,
} );
} );
// -->
</script>
- fx
スライドが切り替わるアニメーションの種類を指定するオプション。
上から下へスクロールするアニメーションにするには、「scrollDown」を指定。
- easing
jQuery Easing Plugin の動作を指定するオプション。
- speed
スライドが切り替わるアニメーション動作速度を指定するオプション。
1500ミリ秒を指定した。
- timeout
スライド1つ1つの表示時間を指定するオプション。
4000ミリ秒を指定した。
- sync
消えるアニメーションと現れるアニメーションを同時に実行するか指定するオプション。
「1」を指定すると、表示中のスライドが消えるアニメーション中に、次のスライドを表示するアニメーションが始まる。
HTML
パスは、それぞれ、画像ファイルの場所を指定する。
<div id="jquery-cycle">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
<img src="5.jpg" />
</div>
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
<img src="5.jpg" />
</div>