このフォトギャラリーは、css の animation に加えて transform プロパティーを使って、サムネイルに角度をつけたり、回転させたりするビジュアル効果を加味したものである。写真は600*338pixのものを6枚用意し、これらを 120*68pixに縮小し、transfom で 60° ずつずらして傾け、それぞれを六角形の辺に配置するようにした。更に、このサムネイルのどれかがクリックされると、全体が回転しながら中心に集まり、クリックに該当する写真だけが元のサイズで拡大表示されるようにしたものである。
ここでは、六角形であるが、他の多角形でも同じ様に作成可能である。
サンプルは基本的なもので、六角形の中に文字や写真を入れたり、写真が切り替わるたびに写真の下に題名を表示したりするとより完成度の高いものとなると思うが、ここでは省略する。
サンプル
本サンプル表示用HTML
<input type="radio" id="r1" name="gal"> <input type="radio" id="r2" name="gal"> <input type="radio" id="r3" name="gal"> <input type="radio" id="r4" name="gal"> <input type="radio" id="r5" name="gal"> <input type="radio" id="r6" name="gal"> <input type="radio" id="r7" name="gal"> <div id="stage"> <div id="thumbs"> <label for="r1"><img src="img2/1.jpg"></label> <label for="r2"><img src="img2/2.jpg"></label> <label for="r3"><img src="img2/3.jpg"></label> <label for="r4"><img src="img2/4.jpg"></label> <label for="r5"><img src="img2/5.jpg"></label> <label for="r6"><img src="img2/6.jpg"></label> </div> </div> <div id="close_btn"><label for="r7">? 閉じる</label></div>
HTMLの概要説明
・ラジオボタン #1-#6 は各写真に、r7 は閉じるボタンに関連付けがされている。
・#stage は、背景黒のギャラリー枠、#thumbs はサムネイル全体を収納するdivでこれを回転させる事によって、サムネイル全部が列をなして回転する。
本サンプル表示CSS
/* ラジオボタンを非表示に */
#r1,#r2,#r3,#r4,#r5,#r6,#r7 {
display:none;
}
/* 表示枠 */
#stage {
position:relative;
width:620px;
height:400px;
background:#000;
}
/* サムネイル収納枠で全体のanimationに関わる */
#thumbs {
width:620px;
height:400px;
}
/* サムネイルの初期表示 */
#thumbs label img {
position:absolute;
width:120px;
height:68px;
top:28px;
left:240px;
border:#fff solid 2px;
cursor:pointer;
}
#thumbs label img:hover {
border:#f00 solid 2px;
}
/* 各サムネイルの表示角度・回転の起点 */
label[for="r1"] img {
-webkit-transform-origin:50% 253%;
-webkit-transform:rotate(0deg);
transform-origin:50% 253%;
transform:rotate(0deg);
}
label[for="r2"] img {
-webkit-transform-origin:50% 253%;
-webkit-transform:rotate(60deg);
transform-origin:50% 253%;
transform:rotate(60deg);
}
label[for="r3"] img {
-webkit-transform-origin:50% 253%;
transform-origin:50% 253%;
-webkit-transform:rotate(120deg);
transform:rotate(120deg);
}
label[for="r4"] img {
-webkit-transform-origin:50% 253%;
transform-origin:50% 253%;
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
label[for="r5"] img {
-webkit-transform-origin:50% 253%;
transform-origin:50% 253%;
-webkit-transform:rotate(240deg);
transform:rotate(240deg);
}
label[for="r6"] img {
-webkit-transform-origin:50% 253%;
transform-origin:50% 253%;
-webkit-transform:rotate(300deg);
transform:rotate(300deg);
}
/* 閉じるボタン */
#close_btn {
color:#fff;
font-weight:bold;
position:absolute;
top:370px;
left:530px;
background:#000;
cursor:pointer;
display:none;
}
/* サムネイルがクリックされたら#thumsを360°回転させる */
#r1:checked ~ #stage #thumbs,#r2:checked ~ #stage #thumbs,#r3:checked ~ #stage #thumbs,#r4:checked ~ #stage #thumbs,#r5:checked ~ #stage #thumbs,#r6:checked ~ #stage #thumbs {
-webkit-animation:rot 1s ease-in;
animation:rot 1s ease-in;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
/* サムネイルがクリックされたら、サムネイルを中心位置に移動し、そこで元のサイズまで拡大する */
#r1:checked ~ #stage #thumbs label[for="r1"] img,#r2:checked ~ #stage #thumbs label[for="r2"] img,#r3:checked ~ #stage #thumbs label[for="r3"] img,#r4:checked ~ #stage #thumbs label[for="r4"] img,#r5:checked ~ #stage #thumbs label[for="r5"] img,#r6:checked ~ #stage #thumbs label[for="r6"] img {
-webkit-animation:expnd 1.6s ease-in;
animation:expnd 1.6s ease-in;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
z-index:100;
border:#fff solid 3px;
}
/* どれかのサムネイルがクリックされたら、それ以外の サムネイルを中心位置に移動させる*/
#r1:checked ~ #stage #thumbs label:not([for="r1"]) img, #r2:checked ~ #stage #thumbs label:not([for="r2"]) img, #r3:checked ~ #stage #thumbs label:not([for="r3"]) img, #r4:checked ~ #stage #thumbs label:not([for="r4"]) img, #r5:checked ~ #stage #thumbs label:not([for="r5"]) img, #r6:checked ~ #stage #thumbs label:not([for="r6"]) img {
-webkit-animation:centering 1s ease-in;
animation:centering 1s ease-in;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
/* サムネイルがクリックされたら閉じるボタンを表示させる */
#r1:checked ~ #close_btn,#r2:checked ~ #close_btn,#r3:checked ~ #close_btn,#r4:checked ~ #close_btn,#r5:checked ~ #close_btn,#r6:checked ~ #close_btn {
display:block;
}
/* #thumbsの回転 */
@-webkit-keyframes rot {
0% { -webkit-transform:none; }
100% { -webkit-transform:rotate(360deg); }
}
@keyframes rot {
0% { transform:none; }
100% { transform:rotate(360deg);; }
}
/* サムネイルを中心位置に移動 */
@-webkit-keyframes centering {
0% { top:28px;}
100% { top:166px; -webkit-transform:rotate(360deg);}
}
@keyframes centering {
0% { top:28px;}
100% { top:166px; transform:rotate(360deg);}
}
/* クリックされたサムネイルを中心位置に移動させ、次いで拡大させる */
@-webkit-keyframes expnd {
0% { top:28px;}
63% { width: 120px;height: 68px;top:166px;left:240px;-webkit-transform:rotate(360deg);}
75% { width: 120px;height: 68px;top:166px;left:240px;-webkit-transform:rotate(360deg);}
100% {top:10px;left:8px;width:600px;height:338px;-webkit-transform:rotate(360deg);}
}
@keyframes expnd {
0% { top:28px;}
63% { width: 120px;height: 68px;top:166px;left:240px;transform:rotate(360deg);}
75% { width: 120px;height: 68px;top:166px;left:240px;transform:rotate(360deg);}
100% {top:10px;left:8px;width:600px;height:338px;transform:rotate(360deg);}
}
CSSのポイント解説
・幅600pxの写真は、サムネイル（幅120px）として初期表示する。=>#thumbs label img { 内
・サムネイルを、#stageの中心を中心とする正六角形の各辺の上にのるように配置する。
（まず全部のサムネイルを上記の初期表示位置に配置し、順番に#stageの中心を起点に60度ずつずらして表示させる。
=> transform-origin:50% 253%; transform:rotate(60deg);
253% はサムネイル上部から六角形中心までの距離（120*sin(60°)+68）を写真の高さ（68）で割ったパーセント値）
・animation:rot では、#thumbsを回転させることで、サムネイル全体が並んだまま回転し、それぞれが一周したところで止まる。
・animation:centering では、クリックされたサムネイル以外のサムネイルが中心位置まで移動し水平位置になる。
◯◯以外は、label:not([for=”r1″]) のように記述する。
・animation：expnd では、クリックされたサムネイルが中心位置に移動し、一旦その位置で水平静置し、ついで元のサイズ（幅600px）まで拡大する。