画面下部に配置されたサムネイルをクリックすると、そのサムネイルがまず画面中央にそのサイズのまま移動し、0.1静止した後、拡大して写真が表示されるタイプのフォトギャラリーである。
cssのanimationプロパティーを使って、left,top,width,heightの値を変化させ、この効果を出している。また、サムネイルが拡大する前の状態で見えるように、各写真の題名を背景スクリーンに切り替えて表示するようにした。
サンプル
針ノ木岳から爺ヶ岳への縦走路にて
朝焼けの針ノ木岳
針ノ木岳、スバリ岳を背に岩小屋沢岳への登り
剣岳を真近に望む
鹿島槍ヶ岳、後立山連峰
岩小屋沢、鳴沢岳を背に岳爺ヶ岳への登り
針ノ木岳、スバリ岳を背に岩小屋沢岳への登り
剣岳を真近に望む
鹿島槍ヶ岳、後立山連峰
岩小屋沢、鳴沢岳を背に岳爺ヶ岳への登り
本サンプル表示用HTML
<div id="stage"> <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"> <div id="screen"><span id="title">針ノ木岳から爺ヶ岳への縦走路にて</span></div> <div id="subtitle"> <span id="st1">朝焼けの針ノ木岳</span> <span id="st2">針ノ木岳、スバリ岳を背に岩小屋沢岳への登り</span> <span id="st3">剣岳を真近に望む</span> <span id="st4">鹿島槍ヶ岳、後立山連峰</span> <span id="st5">岩小屋沢、鳴沢岳を背に岳爺ヶ岳への登り</span> </div> <div id="photo1"><label for="r1"><img src="wp-images/1.jpg"></label></div> <div id="photo2"><label for="r2"><img src="wp-images/2.jpg"></label></div> <div id="photo3"><label for="r3"><img src="wp-images/3.jpg"></label></div> <div id="photo4"><label for="r4"><img src="wp-images/4.jpg"></label></div> <div id="photo5"><label for="r5"><img src="wp-images/5.jpg"></label></div></div> |
HTMLの概要説明
・ラジオボタン、サムネイル写真の配置は、前項同時移動拡大型と同じ。
・各写真切替時に写真の題名表示のための#subtitle,st1,,,st5 を記述している。
本サンプル表示用CSS
※コメントによるご指摘により、一部変更しています。※
#stage { position: relative; width: 660px; height: 440px; margin: 0 auto;}#screen { position: absolute; left: 30px; top: 10px; width: 600px; height: 338px; background-color: #CCC;}#screen span { position:absolute; top:130px; left:50px; font-size:32px;}#r1, #r2, #r3, #r4, #r5 { display: none;}#photo1,#photo2,#photo3,#photo4,#photo5 { position:absolute; top:360px; float:left; width:120px; height:68px;}#photo1 {left:20px;}#photo2 {left:145px;}#photo3 {left:270px;}#photo4 {left:395px;}#photo5 {left:520px;}#photo1 img,#photo2 img,#photo3 img,#photo4 img,#photo5 img { /* 記述変更 width:120px; height:68px; cursor: pointer;*/ width:100%;}/* 追加 */#photo1 img:hover,#photo2 img:hover,#photo3 img:hover,#photo4 img:hover,#photo5 img:hover { cursor: pointer;}#subtitle { position:absolute; left:100px; top:50px; width:500px; font-size:22px;}#subtitle #st1,#subtitle #st2,#subtitle #st3,#subtitle #st4,#subtitle #st5 { position:absolute; left:0; top:0; opacity:0;}/* 以下、この項すべて削除#r1:checked ~ #photo1 img,#r2:checked ~ #photo2 img,#r3:checked ~ #photo3 img,#r4:checked ~ #photo4 img,#r5:checked ~ #photo5 img { -webkit-animation: expand 2s ease; -moz-animation: expand 2s ease; -o-animation: expand 2s ease; animation: expand 2s ease; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards;}*/#r1:checked ~ #photo1,#r2:checked ~ #photo2,#r3:checked ~ #photo3,#r4:checked ~ #photo4,#r5:checked ~ #photo5 { -webkit-animation: expand 2s ease; -moz-animation: expand 2s ease; -o-animation: expand 2s ease; animation: expand 2s ease; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards;}#r1:checked ~ #screen span, #r2:checked ~ #screen span, #r3:checked ~ #screen span, #r4:checked ~ #screen span, #r5:checked ~ #screen span { opacity: 0;}#r1:checked ~ #subtitle #st1,#r2:checked ~ #subtitle #st2,#r3:checked ~ #subtitle #st3,#r4:checked ~ #subtitle #st4,#r5:checked ~ #subtitle #st5 { opacity:1;}@-webkit-keyframes expand { 50% { width:120px;height:68px; left:270px;top:145px;} 60% { width:120px;height:68px; left:270px;top:145px;} 100% { width:600px;height:338px; position:absolute;left:30px;top:10px;}}@-moz-keyframes expand { 50% { width:120px;height:68px; left:270px;top:145px;} 60% { width:120px;height:68px; left:270px;top:145px;} 100% { width:600px;height:338px; position:absolute;left:30px;top:10px;}}@-o-keyframes expand { 50% { width:120px;height:68px; left:270px;top:145px;} 60% { width:120px;height:68px; left:270px;top:145px;} 100% { width:600px;height:338px; position:absolute;left:30px;top:10px;}}@keyframes expand { 50% { width:120px;height:68px; left:270px;top:145px;} 60% { width:120px;height:68px; left:270px;top:145px;} 100% { width:600px;height:338px; position:absolute;left:30px;top:10px;}} |
CSSのスポット説明
・ラジオボタン、サムネイルの配置は、前項同時移動拡大型と同じ。
・各写真切替時題名表示用 div(#subtitle),span(#st1,,,#st5)を設定。
・animationは、サムネイルクリックで開始させる。
・animation プロパティーで、width,height,left,top の値を、全2秒の間の、50,60,100%に設定する。
（50%(1秒)でサイズを保ったまま中央に移動し、60%まで静止し、2秒後に表示サイズまで拡大する）
・animation の animation-fill-mode: forwards; は、animationが100%終了した時点でそのままの状態を保つ。
はじめまして
いつも参考にさせていただいております。
さて、この記事のなかにあるスライドショーを使わせていただいたころ
ブラウザでは普通にみえるのですが、Chromeでみさせてもらったところ
スライドの動きが変な方向にいってズレてしまいます。
これはどうしてでしょうか？
はじめまして。
確かに、Chromeではおかしい動きをしますね。
そもそも、cssが練れていなかったようです。
上のように本文を修正しました。
これでうまくいきますので、試してください。
確認しました、正常に作動しています！
でも、ぼくが作ったやつは写真のサイズが拡大してしまうみたいです・・・。
＞写真のサイズが拡大してしまうみたいです・・・。
とありますが、どういうことでしょう。
このサンプルでいうと、600*338pxよりも大きくなるということですか？
連投もうしわけありません、
どうやら高さを設定し忘れてたようです。
自己完結してもうしわけありません。
おそらくそちらのCSSは正しく、僕の設定ミスと思われます。
本当に助かりました。
成功しました！
/* 記述変更
width:120px;
height:68px;
cursor: pointer;*/
width:100%;
のところにheight:100%;をつければ完成でした！
ありがとうございます！
成功おめでとうございます。
今後も当サイトをご活用ください。
すいません、またきてしまいました。
画像を5つから8つに増やしてみたところ
真ん中のstageがどうやら下の画像についてってしまい、左に偏ってしました。
なんとか真中にできないかと思い、widthを大きくしたところ
拡大のときのアニメーションが不細工なことになってしまいました。
なんとかwidthを変更させず、下の画像を変更させてバランスのいいようにできませんでしょうか？
一番簡単なやり方は、下のサムネイル画像のwidthを、75pxにして元の横幅内に収めることです。
全体を大きくしたい場合は、一段目の移動が、大きくした画面の中央に来るようにleft,topを調整してください。
ありがとうございました！！！
解決しました！！！
今後ともよろしくお願いします。
解決おめでとうございます。
今後も活用ください。