[JS]カードを重ねるアニメーションで画像を表示するスライドショー

Post on:2010年6月30日

sponsors

jQueryとCSS3を使用して、カードをどんどん重ねるアニメーションで画像を表示するスライドショーを紹介します。

スライドショーのデフォルトは下記のようになります。

スライドショーのデフォルト

デフォルト時の左右の矢印をクリックすることで、表示している5つのパネルを変更できます。

各パネルをクリックすると、スライドショーが始まります。

左端の画像をクリック

対応ブラウザはCSS3に対応したChrome, Safariですが、Firefox, IE7などでもそれなりにスライドショーを楽しむことができます。
また、画像をAJAXで呼び出す際にPHPを使用しています。