jQuery.cross-slide で画像にアニメーション効果をつける


画像のスライドショーというか、Flash使わずにちょっとカッコよくとか、そんなの。
http://tobia.github.com/CrossSlide/

指定はちょいわかりにくいけど、定番セット作っておけば毎回指定するとかもないような気がする。
そして、jQueryがかなり新しめじゃないと(確認したのは1.4.2)動作しないみたいで最初ハマった。
GoogleのCDN使うとjQuery 1.3.1が最新かと思いきや、1.4.2指定したら出来た。

そんなこんなで下記のような感じで指定。

1
2
3
4
5
6
7
8
9
<div id="slide" style="height: 150px; width: 300px;">Loading...</div>
<script type="text/javascript">// <![CDATA[
    jQuery('#slide').crossSlide(
        { fade: 2 }, [
        { src: 'images/a.jpg', from: '100% 80% 1x', to: '100% 0% 1.7x', time: 2 },
        { src: 'images/b.jpg', from: 'top left', to: 'bottom right 1.8x', time: 2},
        { src: 'images/c.jpg', from: '100% 80% 2x', to: '80% 0% 1x', time: 2}
    ]);
// ]]></script>

<div>とかであらかじめ縦・横サイズは決めてあげる。
そしたら、画像サイズもそれ以上のサイズで用意。

fromとかtoで画像の表示部分をCSSのルールに従って位置を決めつつ、1xとか1.5xで拡大率を指定、timeはアニメーションする時間、fadeはクロスフェードの時間です。
単なる画像のクロスフェードよりは、少し表現が豊かになった気がします。

ちなみにiPhoneでも動作確認しました。
まあ、1ページに1つとかにしないと重いです。

追記 2011.04.06
ここまで派手ではないですが、単なるフェードイン・フェードアウトのスライドショーのサンプルを作ってみました。参考までにドウゾ。
jQueryゼロから / スライドショー

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です