第11回ホームページ勉強会
|
|
|
今回の課題：カバーフロー型スライドショー
|
今回の勉強会は以前｢テロップ付きフェードイン・アウト型スライドショー｣、｢3D回転型スライドショー｣や｢グリッド伸縮型フォトギャラリー｣の採用に当たって使用させて頂いた、『cssだけで作るスライドショー･フォトギャラリー』から｢カバーフロー型スライドショー｣を勉強して見たいと思います。
今回も、ここから『cssだけで作るスライドショー･フォトギャラリー』の｢カバーフロー型スライドショー｣に接続し、htmlおよびcssをコピー＆ペーストでスライドショーを作って見ましょう。
作り方は、過去の例と同じで、特に注意しなければならないという注意点は有りません。
事前準備：400×400pxの写真を6枚を各自準備して下さい。
大きい写真を使用したい場合には、css内のpx値とhtmlのサイズを｢写真サイズ/400｣倍にすればOKです。但し、縦横比が異なる場合ついては、今回はまだ検証していないので、縦横比は1:1で準備して下さい。
採用事例
|
今回は、資料作成が遅くなりましたが、事前にできる方は実施して見て下さい。
できなかった方は、写真だけ準備しておいて下さい。勉強会当日に一緒に実施して見ましょう！
|
出典元のhtmlとcss
htmlでは、写真のサイズとフォルダー名、ファイル名を皆さんのデータに合わせて修正し、<body>～</body>内に記載して下さい。
html
<div id="stage">
<div id="photo1" class="photo"><img src="wp-images/f1.jpg" width="300" height="300"></div>
<div id="photo2" class="photo"><img src="wp-images/f2.jpg" width="300" height="300"></div>
<div id="photo3" class="photo"><img src="wp-images/f3.jpg" width="300" height="300"></div>
<div id="photo4" class="photo"><img src="wp-images/f4.jpg" width="300" height="300"></div>
<div id="photo5" class="photo"><img src="wp-images/f5.jpg" width="300" height="300"></div>
<div id="photo6" class="photo"><img src="wp-images/f6.jpg" width="300" height="300"></div>
</div> |
cssはhtmlに組み込むか、別ファイルにしてリンクを設定するかの2通りの設定方法があります。
表示サイズを変更する場合には、css内の全てのpx数を表示倍率を掛けた値に変更します。
css
/* 表示領域 */
#stage {
position:relative;
width: 600px;
height: 400px;
background: #333;
overflow:hidden;
}
/* スライド共通 */
.photo {
position: absolute;
left: 150px;top:50px;
border:#fff 2px solid;
z-index:-1;
}
/* 各スライドのanimation設定 */
#photo1 {
-webkit-animation:slidepass 18s infinite;
-webkit-animation-delay:-9s;
animation:slidepass 18s infinite;
animation-delay:-9s;
}
#photo2 {
-webkit-animation:slidepass 18s infinite;
-webkit-animation-delay:-6s;
animation:slidepass 18s infinite;
animation-delay:-6s;
}
#photo3 {
-webkit-animation:slidepass 18s infinite;
-webkit-animation-delay:-3s;
animation:slidepass 18s infinite;
animation-delay:-3s;
}
#photo4 {
-webkit-animation:slidepass 18s infinite;
-webkit-animation-delay:-0s;
animation:slidepass 18s infinite;
animation-delay:0s;
}
#photo5 {
-webkit-animation:slidepass 18s infinite;
-webkit-animation-delay:3s;
animation:slidepass 18s infinite;
animation-delay:3s;
}
#photo6 {
-webkit-animation:slidepass 18s infinite;
-webkit-animation-delay:6s;
animation:slidepass 18s infinite;
animation-delay:6s;
}
/* スライドの動きワンサイクル */
@-webkit-keyframes slidepass {
0% {-webkit-transform:perspective(1000px) rotateY(-95deg) translateZ(-300px);z-index:11;}
10% {-webkit-transform:perspective(1000px) rotateY(-95deg) translateZ(-240px);z-index:12;}
16.7% {-webkit-transform:perspective(1000px) rotateY(-95deg) translateZ(-240px);z-index:12;}
26.7% {-webkit-transform:perspective(1000px) rotateY(-90deg) translateZ(-200px);z-index:13}
33.3% {-webkit-transform:perspective(1000px) rotateY(-90deg) translateZ(-200px);z-index:13}
43.3% {-webkit-transform:perspective(1000px) rotateY(0deg) translateZ(0px);z-index:14;}
50% {-webkit-transform:perspective(1000px) rotateY(0deg) translateZ(0px);z-index:14;}
60% {-webkit-transform:perspective(1000px) rotateY(90deg) translateZ(-200px);z-index:17;}
66.7% {-webkit-transform:perspective(1000px) rotateY(90deg) translateZ(-200px);z-index:17;}
76.7% {-webkit-transform:perspective(1000px) rotateY(95deg) translateZ(-240px);z-index:15;}
83.4% {-webkit-transform:perspective(1000px) rotateY(95deg) translateZ(-240px);z-index:15;}
93.7% {-webkit-transform:perspective(1000px) rotateY(95deg) translateZ(-300px);z-index:11}
100% {-webkit-transform:perspective(1000px) rotateY(95deg) translateZ(-300px);z-index:11}
}
@keyframes slidepass {
0% {transform:perspective(1000px) rotateY(-95deg) translateZ(-300px);z-index:11;}
10% {transform:perspective(1000px) rotateY(-95deg) translateZ(-240px);z-index:12;}
16.7% {transform:perspective(1000px) rotateY(-95deg) translateZ(-240px);z-index:12;}
26.7% {transform:perspective(1000px) rotateY(-90deg) translateZ(-200px);z-index:13}
33.3% {transform:perspective(1000px) rotateY(-90deg) translateZ(-200px);z-index:13}
43.3% {transform:perspective(1000px) rotateY(0deg) translateZ(0px);z-index:14;}
50% {transform:perspective(1000px) rotateY(0deg) translateZ(0px);z-index:14;}
60% {transform:perspective(1000px) rotateY(90deg) translateZ(-200px);z-index:17;}
66.7% {transform:perspective(1000px) rotateY(90deg) translateZ(-200px);z-index:17;}
76.7% {transform:perspective(1000px) rotateY(95deg) translateZ(-240px);z-index:15;}
83.4% {transform:perspective(1000px) rotateY(95deg) translateZ(-240px);z-index:15;}
93.7% {transform:perspective(1000px) rotateY(95deg) translateZ(-300px);z-index:11}
|
|
|
|
|
 |
