SCRIPT無しでCSS3のみでアニメーション動作を実装させるサンプル。
今回は自動でスライド(スクロール)する画像ギャラリーの紹介。

初めに完成サンプルから。
※動作環境はWebkitブラウザのSafariやChromeのみです!

CSS3 AUTO SLIDE GALLERY

メイン画像と併せて、下位置にサムネイル画像を並べて、
オートスタート形式で順々に画像がスライドします。

現在表示している画像のサムネイルは、
透過度が100%になり、通常サイズよりも1.2倍の大きさに拡大し、
ドロップシャドウ(白)が付けます。
※画像ではなくCSS3でのドロップシャドウ。

全体構成について、まずはHTMLソースから。
メイン画像とサムネイル画像は別々のリストで形成しています。

◆HTML
<div id="slidewrap">
<div id="slidemask">
<ul id="photo">
<li id="slide01"><img src="img/photo01.jpg" width="500" height="375" alt=""><span>【PHOTO-01】</span></li>
<li id="slide02"><img src="img/photo02.jpg" width="500" height="375" alt=""><span>【PHOTO-02】</span></li>
<li id="slide03"><img src="img/photo03.jpg" width="500" height="375" alt=""><span>【PHOTO-03】</span></li>
<li id="slide04"><img src="img/photo04.jpg" width="500" height="375" alt=""><span>【PHOTO-04】</span></li>
</ul>
</div><!--/#slidemask-->
<ul id="thumb">
<li id="thumb01"><a href="#"><img src="img/photo01.jpg" width="125" height="94" alt=""></a></li>
<li id="thumb02"><a href="#"><img src="img/photo02.jpg" width="125" height="94" alt=""></a></li>
<li id="thumb03"><a href="#"><img src="img/photo03.jpg" width="125" height="94" alt=""></a></li>
<li id="thumb04"><a href="#"><img src="img/photo04.jpg" width="125" height="94" alt=""></a></li>
</ul>
</div><!--/#slidewrap-->

・メイン画像用リスト<ul id=”photo”>
・サムネイル画像用リスト<ul id=”thumb”>

この2つのリストに対して、メイン画像用リストのみを囲う<div id=”slidemask”>と
メイン画像とサムネイル画像全てのリストを囲う<div id=”slidewrap”>の2つ用意しています。

そしてこれらをCSS3を使って動かします。

◆CSS
/* SlideArea
-------------------------- */
#slidewrap {
	margin: 0 auto;
	padding: 20px 20px;
	width: 500px;
	text-align: left;
	background: #333;
}
#slidewrap ul li {
	list-style: none;
}

#slidemask {
	width: 500px;
	height: 375px;
	overflow: hidden;
	position: relative;
}


/* PhotoSlideArea
-------------------------- */
ul#photo {
	top: 0;
	left: 0;
	width: 2000px;
	height: 375px;
	position: absolute;
}
ul#photo li {
	width: 500px;
	height: 375px;
	float: left;
	position: relative;
}

ul#photo li span {
	bottom: 0;
	left: 0;
	padding: 0 10px;
	width: 480px;
	height: 30px;
	line-height: 30px;
	color: #fff;
	font-weight: bold;
	background: #333;
	position: absolute;
	opacity: 0.5;
}


/* ThumbnailBTN
-------------------------- */
ul#thumb {
	width: 500px;
	height: 94px;
}
ul#thumb li {
	width: 125px;
	height: 94px;
	float: left;
}

ul#thumb li img {
	opacity: 0.5;
}
ul#thumb li:hover {opacity: 1;}


/* CSS3 PhotoSlideAnimation
-------------------------- */
@-webkit-keyframes AutoSlidePhoto {
	0% {left: 0;}
	20% {left: 0;}
	25% {left: -500px;}

	45% {left: -500px;}
	50% {left: -1000px;}

	70% {left: -1000px;}
	75% {left: -1500px;}

	95% {left: -1500px;}
	100% {left: 0;}
}
ul#photo {
	-webkit-animation-name: AutoSlidePhoto;
	-webkit-animation-duration: 20s;
	-webkit-animation-iteration-count:infinite;
}


/* CSS3 ThumbnailSlideAnimation
-------------------------- */
@-webkit-keyframes AutoSlideThumb {
	0% {opacity: 0.5;-webkit-transform:scale(1);}
	1% {opacity: 1;-webkit-transform:scale(1.2);-webkit-box-shadow: 0 0 10px #fff;z-index:10;}
	20% {opacity: 1;-webkit-transform:scale(1.2);-webkit-box-shadow: 0 0 10px #fff;z-index:10;}
	21% {opacity: 0.5;-webkit-transform:scale(1);}
	100% {opacity: 0.5;-webkit-transform:scale(1);}
}

ul#thumb li#thumb01 img,
ul#thumb li#thumb02 img,
ul#thumb li#thumb03 img,
ul#thumb li#thumb04 img {
	-webkit-animation-name: AutoSlideThumb;
	-webkit-transform: scale(1);
	-webkit-animation-duration: 20s;
	-webkit-animation-iteration-count: infinite;
}

ul#thumb li#thumb02 img {-webkit-animation-delay: 5s;}
ul#thumb li#thumb03 img {-webkit-animation-delay: 10s;}
ul#thumb li#thumb04 img {-webkit-animation-delay: 15s;}

アニメーション設定箇所で「AutoSlidePhoto」と定義したアニメーション動作で
メイン画像を置いている<ul>の位置「left」の値を変化させてスライドさせています。

もう一つのアニメーション定義「AutoSlideThumb」では、
サムネイルの透過度/拡大/ドロップシャドウのアニメーション動作を設定します。

各サムネイル画像に対して「AutoSlideThumb」定義を実行させますが、
動作開始時間を決める「-webkit-animation-delay」の値を変え、
同じアニメーション動作の開始時間をズラすことで
順々にアニメーションが動作しているように見せています。

全体構成についてはこんな感じです。

本来はサムネイルクリックで
メイン画像とサムネイル画像を動かしたいのですが
まだその部分は「CSS3のみ」の構成では実現できていません。。。
(一度オートスタートさせてしまったCSS3アニメーションは動作の停止などが難しい…)

このサンプルを元にカスタマイズを重ね、
jQueryでのスライドギャラリーと同じ規模のものが
CSS3のみで実現できないかいろいろ試してみたくなります。

CSS3のみでスライドアニメーションが必要になった際のご参考までに。。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

CSS(CSS3)のみで、自動再生/オートスライド(スクロール)する画像ギャラリー作成方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner