Javascript無し CSS3で作成 コンテンツスライダー
2011.11.29
この記事は最終更新日から1年以上が経過しています。
Flashやjavascriptで制作されたコンテツスライダー、バナーのスライダー等は一般的にあったのですが、これをCSS3で作成してみました。
デモページ
デモページはこちらから
HTML
<div class="displayArea"> <div class="slider"> <ul class="slideLi"> <li><a href="#"><img src="img/cs000.jpg" alt="" /></a></li> <li><a href="#"><img src="img/cs001.jpg" alt="" /></a></li> <li><a href="#"><img src="img/cs002.jpg" alt="" /></a></li> <li><a href="#"><img src="img/cs003.jpg" alt="" /></a></li> </ul> <div class="progress"></div> <ul class="slideMark"> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div>
HTMLはなんら特別なことは行っていません。
div.displayAreaという全体を表示するエリアとして配置。
div.sliderというスライド表示部分を作り、ul.slideLiというスライドさせるリストをマークアップ、
表示させるimg要素をa要素で包んでおります。
スライドした部分のバーはdiv.progressとして配置。
また、右上の丸いマークをul.slideMarkとして配置しています。
スライド部分の設定
CSS
.slider{ position:relative; width:600px; height:200px; overflow:hidden; }
.sliderで必要なCSSはこのぐらいですね。あとは任意で
border:#666 1px solid; -webkit-box-shadow:rgba(0,0,0,0.5) 2px 2px 2px;
などを追加しています。
.slider .slideLi{ position:absolute; top:0; left:0; width:2400px; height:200px; -webkit-animation:slide 20s infinite; }
スライダーリストのクラス.slideLiに必要なcssです。
position:absolute;を設定する点と-webkit-animation:slide 20s infinite;(他のベンダープレフィックスも任意で追加してください。)
でスライド全体のアニメーションの時間設定を行います。infiniteで繰り返し再生させます。
CSS
.slider .slideLi li{ position:relative; float:left; display:block; width:600px; height:200px; }
liはfloatで横に並べるプロパティ指定をします。
アニメーション設定
それではアニメーションの設定を
CSS3
@-webkit-keyframes slide{ 20% {left:0px;} 25% {left:-600px;} 45% {left:-600px;} 50% {left:-1200px;} 70% {left:-1200px;} 75% {left:-1800px;} 98% {left:-1800px;} 100% {left:0px;} }
ul.slideLiに設定したキーフレーム名『slide』というアニメーションの設定です。
leftプロパティで動かしています。4つ配置しているため、25%区切りで調整を行っています。
またデモではopacityのプロパティも追加し、移動時には若干透過するようになってます。
詳しいソースはこちらから
デモページ
デモページはこちらから
CSS マウスオーバー時設定
CSS3
マウスオーバーしたときにアニメーションを止めるのは、こちらのプロパティ。
-moz-animation-play-state:paused; -webkit-animation-play-state:paused;
設定したアニメーションを止めます。
マウスオーバー時にスライドを止めたいので、
.slider:hover .slideLi{ -moz-animation-play-state:paused; -webkit-animation-play-state:paused; }
この設定で止めます。
プログレスバー設定
どのタイミングでスライドするか、を明確にするため、プログレスバーを設置する例が多いと思います。
このプログレスバーも上記の例でCSSでアニメーションさせましょう。
.progress{ position:absolute; bottom:0px; left:0; width:600px; height:2px; background:#f98131; -webkit-animation:progress 5s infinite; }
一番下に配置したいのでbottom:0px;の設定。
最大に伸びた場合のサイズwidth:600px;の設定。
また一つのスライドのアニメーションの長さを
-webkit-animation:progress 5s infinite;で設定します。
あとはキーフレーム名progressのアニメーションの設定をします。
CSS3
@-webkit-keyframes progress{ 0% {width:0px;} 2% {width:0px;} 88% {width:600px;} 92% {width:600px;} 100% {width:0px;} }
100%にタスクが完了した場合のwidth:600px;を設定したいのですが、
軽くズレが生じたので88%〜92%の設定をしております。
ポーズボタン
あとはポーズボタンの設定。
HTMLとして要素を配置するのもあれなので、擬似要素として生成し配置を行います。
.slider::before, .slider::after{ content:""; position:absolute; top:50%; left:50%; display:block; width: 6px; height:30px; background:#fff; z-index: 10; -webkit-transform: rotate(-1deg) scale(0); } .slider::before{ margin:-15px 0 0 -15px; } .slider::after{ margin:-15px 0 0 0px; } .slider:hover::before, .slider:hover::after{ -webkit-transform: rotate(-1deg) scale(1); }
content:””;で生成、その他のプロパティは任意で設定します。
マウスオーバー時に scale(1)になるように設定していますので、
マウスオーバー時のみ表示します。(その他display:none;とかでも問題ないです。)
そのままだと寂しかったのでrotate(-1deg) で傾くように設定しております。
最後に右上のマークなのですが、デモページのソースを参考にしていただければと思っています。
デモページ
デモページはこちらから
ちょっとしたコンテンツスライダーならCSSで実装しても良いかも知れませんね。