jQuery の Cycle プラグインを使い、右上から現れて右下へ消えるアニメーションで切り替わるスライドショーを作る方法。右上から現れて右下へ消えるアニメーションで切り替えるようにするには、「fx」オプションに「custom」を指定し、さらに「cssBefore」「animIn」「animOut」オプションを使う。
実装例（サンプル）
実装例（サンプル）の動作について
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.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>
<!--
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>
<!--
#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>
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
<img src="5.jpg" />
</div>