返信
全スライド枚数で等分したスライス画像（このデモではスライド枚数が5枚なので、5等分した画像）を、一枚分のスライドになるように水平に並べ、各スライスをクリックすると該当する画像がフェイドインするタイプのフォトギャラリーで … 続きを読む
カテゴリーアーカイブ: フォトギャラリー
これまで、サムネイルの数が５つの場合についてサンプルを作成してきた。もっとスライドの数が増えた場合（この例では10枚）の対処として、サムネイルが左右に移動して全部が現れるようにし、サムネイルのマウスオーバー時に、サムネ … 続きを読む
複数シリーズのサムネイル群を、ボタンクリックで切り替え、サムネイルのクリックで写真がFadeIn表示されるタイプのギャラリーである。先に、「複数シリーズ切換え型ギャラリー」で、切り替えるとサムネイルが流れ落ちるタイプを … 続きを読む
格子状に配置されたサムネイルをロールオーバーすると、マウスがのったサムネイルが拡大し、その他のサムネイルが縮んで全体の格子の幅・高さは変わらないという効果を持つサムネイルクリック型のフォトギャラリーである。拡大したサム … 続きを読む
表現が難しいが、サンプルを見ていただければすぐお分りの通り、タイトル文字列にマウスオーバーすると、円形のサムネイルが360度ワイプされて出現するというもので、サムネイルクリックで写真がフェイドインするタイプのフォトギャ … 続きを読む
複数シリーズのサムネイル群を、ボタンクリックで切り替え、サムネイルのクリックで写真がFadeIn表示されるタイプのギャラリーである。 サムネイル群が、切換えボタンの位置から、表示位置まで舞い降りるアニメーションを付加 … 続きを読む
サムネイルをMetro画面風のタイルの裏に配置しておき、マウスオーバーで回転しながら登場し、そのクリックで拡大写真が表示されるタイプのフォトギャラリーである。ここでは写真表示用となっているが、ナビゲーションにも使えるし … 続きを読む
全てのサムネイルを、同時にサイズを大きくしながら順次手前に移動させ、ステージを循環させる。 サムネイルのマウスオーバーでやや拡大、マウスクリックで拡大写真をステージいっぱいにフェイド・インさせるタイプの、フォトギャラリー … 続きを読む
タブとなるタイトルバーをクリックすると、ウインドウが開き、そのタイトルに該当する写真が現れる、いわゆるアコーディオン式のビューアーである。このサンプルでは、現れる写真をクリックすると、関連の写真集のページが開くようにし … 続きを読む
このフォトギャラリーは、css の animation に加えて transform プロパティーを使って、サムネイルに角度をつけたり、回転させたりするビジュアル効果を加味したものである。写真は600*338pixのもの … 続きを読む