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で実装しても良いかも知れませんね。
