先日、CSS3 Transitionでのアニメーション実行パターンを紹介しましたが、
今回はスクリプト系を使用せずにCSS(CSS3)のみで形成する
スライド画像ギャラリーのサンプルを紹介してみます。

CSS3で使用しているプロパティは、
TransitionやTransformは使用せず「-animation-」で動作を指定する構成になります。

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

CSS3 SLIDE GALLERY

右側に配置しているサムネイルをクリックすることで、
メイン部分の画像がスライドして切り替わります。

サムネイルは現在メイン部分で表示しているアクティブ状態の場合のみ
透過度が「100%」で赤枠が付きます。

中身についてはまずHTMLから。
スライドギャラリー部分のHTMLソースは以下のようになっています。

◆HTML
<div id="slidewrap">
<div id="slidemask">

<div id="contents01">
<div id="thumb01">
<a href="#contents01"><img src="img/photo01.jpg" width="100" height="75" alt=""><img src="img/thumb_cover.png" width="100" height="75" alt="" class="cover"></a>
</div><!--/#thumb01-->
<div id="photo01">
<img src="img/photo01.jpg" width="400" height="300" alt="">
<span>【PHOTO-01】</span>
</div><!--/#photo01-->
</div><!--/#contents01-->

<div id="contents02">
<div id="thumb02">
<a href="#contents02"><img src="img/photo02.jpg" width="100" height="75" alt=""><img src="img/thumb_cover.png" width="100" height="75" alt="" class="cover"></a>
</div><!--/#thumb02-->
<div id="photo02">
<img src="img/photo02.jpg" width="400" height="300" alt="">
<span>【PHOTO-02】</span>
</div><!--/#photo02-->
</div><!--/#contents02-->

<div id="contents03">
<div id="thumb03">
<a href="#contents03"><img src="img/photo03.jpg" width="100" height="75" alt=""><img src="img/thumb_cover.png" width="100" height="75" alt="" class="cover"></a>
</div><!--/#thumb03-->
<div id="photo03">
<img src="img/photo03.jpg" width="400" height="300" alt="">
<span>【PHOTO-03】</span>
</div><!--/#photo03-->
</div><!--/#contents03-->

<div id="contents04">
<div id="thumb04">
<a href="#contents04"><img src="img/photo04.jpg" width="100" height="75" alt=""><img src="img/thumb_cover.png" width="100" height="75" alt="" class="cover"></a>
</div><!--/#thumb04-->
<div id="photo04">
<img src="img/photo04.jpg" width="400" height="300" alt="">
<span>【PHOTO-04】</span>
</div><!--/#photo04-->
</div><!--/#contents04-->

</div><!--/#slidemask-->
</div><!--/#slidewrap-->

ちょっと長いですが、全体を囲む<div>の中に
「contents01」~「contents04」のid名の付いたコンテンツエリアが4つあり、
その中にそれぞれ表示する、画像・サムネイル・テキストが入っています。

そして、この4枚のコンテンツエリアを
CSSで重なり合わせてCSSアニメーション動作を組み込みます。

CSSは以下。(スライドギャラリー部分のみ)

◆CSS
/* SlideArea
-------------------------- */
#slidewrap {
	margin: 0 auto;
	padding: 10px;
	width: 500px;
	text-align: left;
	background: #ddd;
}

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


#contents01,
#contents02,
#contents03,
#contents04 {
	top: 0;
	left: 0;
	width: 500px;
	height: 300px;
	position: absolute;
}


/* ThumbnailBTN
-------------------------- */
#thumb01,
#thumb02,
#thumb03,
#thumb04 {
	right: 0;
	width: 100px;
	height: 75px;
	position: absolute;
	opacity: 0.5;
	z-index: 60;
}
#thumb01 {top: 0;}
#thumb02 {top: 75px;}
#thumb03 {top: 150px;}
#thumb04 {top: 225px;}

img.cover {
	top: 0;
	right: 0;
	position: absolute;
	opacity: 0;
}

#thumb01:hover,
#thumb01:hover img.cover,
#thumb02:hover,
#thumb02:hover img.cover,
#thumb03:hover,
#thumb03:hover img.cover,
#thumb04:hover,
#thumb04:hover img.cover {opacity: 1;}


/* PhotoSlideArea
-------------------------- */
#photo01,
#photo02,
#photo03,
#photo04 {
	top: 0;
	left: 0;
	padding-right: 400px;
	width: 400px;
	height: 300px;
	background: #ddd;
	position: absolute;
}
#photo01 span,
#photo02 span,
#photo03 span,
#photo04 span {
	bottom: 0;
	left: 0;
	padding: 0 10px;
	width: 380px;
	height: 30px;
	line-height: 30px;
	color: #fff;
	font-weight: bold;
	background: #333;
	position: absolute;
	opacity: 0.5;
}

#photo01 {z-index:40;}
#photo02 {z-index:30;}
#photo03 {z-index:20;}
#photo04 {z-index:10;}


/* CSS3 SlideAnimation
-------------------------- */
@-webkit-keyframes slideTarget {
	0% {left: -400px;}
	100% {left: 0;}
}
#contents01:target #photo01,
#contents02:target #photo02,
#contents03:target #photo03,
#contents04:target #photo04 {
	-webkit-animation-name: slideTarget;
	-webkit-animation-duration: 0.8s;
	-webkit-animation-iteration-count: 1;
	z-index: 50;
}
#contents01:target #thumb01,
#contents01:target #thumb01 img.cover,
#contents02:target #thumb02,
#contents02:target #thumb02 img.cover,
#contents03:target #thumb03,
#contents03:target #thumb03 img.cover,
#contents04:target #thumb04,
#contents04:target #thumb04 img.cover {
	opacity: 1;
}

コンテンツエリア4枚をを重ね合わせ、
サムネイル(#thumb01~#thumb04)をクリックした際に
「:target」プロパティを使って該当表示エリアに対して
スライドアニメーションの動作とレイヤー順序の「z-index」を最前面に持ってきています。
※CSSアニメーション動作はCSSの最下部に記述してある「slideTarget」の部分。

jQueryの様なスクリプト系を使わなくても
CSSのみでこれくらいのシンプルな画像スライドギャラリーは作ることが簡単そうです。

サンプルもそんなに複雑に凝った構成ではないので
シンプルに使えるはず。

まだ最低限の機能しか組み込んでいないので、
この先、オートスタートで自動スライドさせたり、
画像が切り替わる時にもっと凝った演出が組み込めないか試してみたくなります。

CSSのみでのスライド画像ギャラリーが必要になった際に是非。。。

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

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

Related Posts

Comments (1)







コメント内容

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

CSS(CSS3)のみでスライド画像ギャラリーを作る方法

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