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

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

デモのキャプチャ

Beautiful Photo Stack Gallery with jQuery and CSS3
デモページ

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

デモのキャプチャ

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

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

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

デモのキャプチャ

左端の画像をクリック

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

sponsors

top of page

©2018 coliss