わずか3分で作るCSS3オートスライダー ITかあさん

わずか3分で作るCSS3オートスライダー

スマートフォンサイトにて、画像をループさせることになり、Javascriptだとやはりスマートフォンでは重かったり、jQuerymobileとでは愛称が悪かったりする問題で、CSS3にてオートスライダーを作ってみました。今回は画像をループさせていますが、テキストでもなんでもOKです。
Javascriptでやるよりも軽くて、簡単なのでスマートフォンサイトではオススメです。

CSS3オートスライダー作成手順

CSS3オートスライダーを作るにはたったこれだけです。

CSS3オートスライダーサンプルコード

こちらにサンプルを記入しておきます。動作の仕組みを細かくコメントアウトで解説しました。
ソースコードコピペでどうぞ。

CSS

* {
	margin: 0;
	padding: 0;
	border: none;
}

/*指定した幅、高さだけ表示*/
#mask {
	width: 239px;
	height: 320px;
	overflow: hidden;/*指定した幅だけ見える*/
	position: relative;
}


ul#photo {
	top: 0;
	left: 0;
	width: 956px;/*アニメーションさせる画像の合計幅*/
	height: 320px;/*写真縦*/
	position: absolute;
}

/*写真を横一列に配置*/
ul#photo li {
	width: 239px;
	height: 320px;
	float: left;
	list-style: none;
	
}

/*アニメーション定義*/
@-webkit-keyframes Slide {
	0% {left: 0;}/*0で始まり・・・*/
	20% {left: 0;}
	25% {left: -239px;}/*20秒の25％、つまり5秒進んだら-239pxずらす*/

	45% {left: -239px;}
	50% {left: -478px;}

	70% {left: -478px;}
	75% {left: -717px;}

	95% {left: -717px;}
	100% {left: 0;}/*20秒の100％、つまり20秒になったら0、初期の場所へ。*/
}
ul#photo {
	-webkit-animation-name: Slide;/*定義したアニメーションの呼び出し*/
	-webkit-animation-duration: 20s;/*アニメーションは『合計』で何秒か*/
	-webkit-animation-iteration-count:infinite;/*『infinite』無制限に繰り替えす*/
}

html

<div>
<div id="mask">
<ul id="photo">
<li id="slide01"><img src="img/musuko1.jpg" width="239" height="320" alt=""></li>
<li id="slide02"><img src="img/musuko2.jpg" width="239" height="320" alt=""></li>
<li id="slide03"><img src="img/musuko3.jpg" width="239" height="320" alt=""></li>
<li id="slide04"><img src="img/musuko4.jpg" width="239" height="320" alt=""></li>
</ul>
</div>
</div>

DEMO画像はアホ息子がひたすらアイス食べている画像です。