[CSS]HTML5, CSS3, jQueryを使用して実装する画像ギャラリー

HTML5で実装し、CSS3を使用して面白い効果をつけ、jQueryで拡大表示する画像ギャラリーをCSS-Tricksから紹介します。

Editable CSS3 Image Gallery
demo

デモはSafariやChromeで見ると、各サムネイル画像がマウスオーバー時にアニメーションを伴って角度を変化させます。
非対応ブラウザでは角度変更のみや垂直に表示された状態です。

各画像をクリックすると、拡大表示します。
拡大に使用しているスクリプトは、当サイトでも紹介した「FancyZoom」です。

画像拡大時のキャプチャ

Post on:2009年10月20日