jQuery の Cycle で、右上から現れて右下へ消えるスライドショー

jQuery の Cycle プラグインを使い、右上から現れて右下へ消えるアニメーションで切り替わるスライドショーを作る方法。右上から現れて右下へ消えるアニメーションで切り替えるようにするには、「fx」オプションに「custom」を指定し、さらに「cssBefore」「animIn」「animOut」オプションを使う。

実装例(サンプル)

実装例(サンプル)の動作について

5つの画像を、右上から現れて右下へ消えるアニメーションで、順番に表示する。

1つの画像の表示時間は、3秒。

右上から現れて右下へ消えるアニメーション動作時間は、1秒。

実装例(サンプル)のソースコード

読み込み

パスは、それぞれ、アップロードした場所を指定する。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-cycle' ) .cycle( {
        speed: 1000,
        timeout: 3000,
        sync: 1,
        fx: 'custom',
        cssBefore:{
            left: 300,
            top: -198,
            display: 'block'
        },
        animIn: {
            left: 0,
            top: 0
        },
        animOut: {
            left: 300,
            top: 198
        },
    } );
} );
// -->
</script>
speed

スライドが切り替わるアニメーション動作速度を指定するオプション。

1000ミリ秒を指定した。

timeout

スライド1つ1つの表示時間を指定するオプション。

3000ミリ秒を指定した。

sync

消えるアニメーションと現れるアニメーションを同時に実行するか指定するオプション。

「1」を指定すると、表示中のスライドが消えるアニメーション中に、次のスライドを表示するアニメーションが始まる。

fx

スライドが切り替わるアニメーションの種類を指定するオプション。

右上から現れて右下へ消えるアニメーションにするには、「custom」を指定し、さらに「cssBefore」「animIn」「animOut」オプションを使う。

cssBefore

現れる直前のスライドに適用されるスタイルを指定するオプション。

animIn

出現アニメーションに関するスタイルを指定するオプション。

animOut

消えるアニメーションに関するスタイルを指定するオプション。

CSS

<style>
<!--
#jquery-cycle {
    width: 300px;
    height: 198px;
    overflow: hidden;
}
#jquery-cycle img {
    width: 300px;
    height: 198px;
}
-->
</style>

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>

スポンサード リンク

カテゴリー: Cycle, JavaScript, jQuery, アニメーション, プラグイン, 画像 パーマリンク