3D壁面(WALL)型フォトギャラリー

 サムネイルクリック型のフォトギャラリーで、いわゆる、3D WALL 型などと呼ばれているタイプのフォトギャラリーである。サムネイルが、奥まった中央のサムネイルに、両側から遠近感をもってサムネイルが近づいていくように見える。今回のサンプルは、5列3行のものであるが、もっと行列数を増やして、画面いっぱいに並べたら迫力あるものになるであろう。

サンプル(DEMO)

 このサンプルは、イメージを示したもので、クリックに反応しません。
 別ページの、サンプルを見てください



本サンプル作成に用意した画像

 ・サムネイル 150*84px 15枚
 ・写真    600*338px 15枚

本サンプル表示用HTML

 サンプルページに併記してあります。
 ・15のサムネイルは、左2列、中央1列、右2列の3つのブロックに分け、左右に遠近感を持たせて効果を出している。
 ・各サムネイルに相当する拡大写真へ a タグでリンクを貼っており、css の :target で発生したクリックイベント元を認知し、その写真を表示するようにしている。
 ・拡大写真は、.photoの中央に表示するようにし、黒色半透明のbackgroundに閉じる印として✖を右上に表示するようにした。
  (写真が表示された後は、stageのどの部分をクリックしても元に戻る)

本サンプル表示用CSS

 サンプルページに併記してあります。
 ・表示枠(#stage)は、max-width:700px; としているが、この値を変えると、サイズが変更できるようになっている。ただし、大きく表示するときは、準備する写真のサイズも大きくする必要があるし、ステージの高さや設定しているmarginなどの数値も調整が必要になる。
 ・左右のブロックに、例えば、transform: perspective(700px) rotateY(24deg) translateZ(25px); などと3D効果を施しているが、これらの数値を変えれば、遠近感の具合が変わる。
 ・サムネイルがうまく並ぶように、それぞれのブロックの幅、マージンなどを微妙に調整しているので、写真サイズなどの条件が変われば、これらの数値を変更する必要が生じる場合もある。

コメントを残す

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