このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2011.11.29

Javascript無し CSS3で作成 コンテンツスライダー

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

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。