お手本にするサンプル
「Pure CSS3 Cycle Slider」をお手本にします。とても美しい動作です。まずは動作を確認して下さい。
- 画像にマウスホーバーすると、スライドが止まる
- マウスホーバーで画像に対応するh1が現れる
- スライドの表示秒数を伝える工夫もされている
マークアップをキチンと考える
最終的にCSSで動作させるのか、jQueryで動作させるのかに関わらず、まずはきちんとマークアップします。そうすると以下の利点があります。
- スライドの中身が、クリックさせたいリンクの列挙だとすれば、SEOの効果も望めます。単に画像を動かすのと、見出しタグ付きの要素が動いているのとでは大違いです。
- 対象ブラウザに合わせて、実装方法を選択できます。例えば、古いIEなどでも動かしたければ、古いIEにだけIEの条件コメントで自作のjQueryを読み込む、等。
- プログレッシブ・エンハンスメントへの対応も、ほとんど出来ていることになります。
ここでは『画像とその名前を含むリンクを箇条書きにする』と考えて ul > li > a > h2,img としてみました。div.progress-barは画像の下に表示させる「スライドの表示秒数を伝える工夫」の為の部品です。
スライドさせる準備
同じhtmlに対して以下の目的でCSSを施します。
- 各<li>のリストマークを外す
- 各<li>をpositionの基準点にする
- 各h2をhover時にだけ表示させる
- お手本では縦にスライドしていますが、今回は横方向にスライドさせたいので、各<li>を並びにする
.slide ul{
list-style:none;
}
.slide ul li{
float:left;
width:100px;
height:50px;
position:relative;
overflow:hidden;
}
.slide ul li h2{
position:absolute;
padding:0.5em 1em;
background:rgba(0,0,0,0.5);
color:#fff;
top:0;
left:-110px;
}
.slide ul li:hover h2 {
left:0px;
}
h2の出現時に動きをつける
hover時の演出にCSS3のtransitionを加えてみます。上記のSAMPLE 2との違いを、マウスオーバーして比べて下さい。
.slide.transit ul li h2{
/*
transitionの秒数を0.5秒に指定。その他の指定はdefaultに任せました。
-moz-はFirefox用のベンダープレフィックスで、
-webkit-がSafariとChrome用のベンダープレフィックスです。
*/
-moz-transition:0.5s;
-webkit-transition:0.5s;
transition:0.5s;
/*フワッと表示される様に不透明度も設定*/
opacity:0;
}
.slide.transit ul li:hover h2 {
/*不透明度が0%から100%になるように*/
opacity:1;
}
要素Aにtransionプロパティをつけると、要素Aが要素A’に変化する「途中」をアニメーションの様に表示できます。Adobe Flashを使ったことがある人は、タイムラインのキーフレームを設定する、と考えるとイメージし易いかもしれません。
要素にマウスオーバーするとhover疑似クラスが付いて、AからA’に変化しますから、これを利用するのが最も使えるパターンです。
他にもtarget、active、select疑似クラスも使えます。また、jQueryでclassを操作しても良いでしょう。下のasideはhover疑似クラスで読める様にしてみました。
次回の予告
次回はいよいよスライドショーを実装します。予習したい人はお手本と、以下の手順を参考にチャレンジして下さい。
- ulをdiv.maskで囲み、横並びの<li>の内、1つだけを表示させて他を隠すCSSを施す
- 各<li>にCSS3のanimatinを設定する
- 各<li>にhoverしたらanimationを一時停止させるanimation-play-stateを追加する
- div.progress-barにもanimatinを設定する
続きを作成しました。予習したい人はどうぞ。→ cssだけでスライドショー（その2）