美しいスタイルと軽快なアニメーションが気持ちいい、エラスティックレイアウト対応の画像ギャラリー

Post on:2011年11月25日

デモ

デモでは、その美しいスタイル、気持ちいいアニメーションを楽しむだけでなく、表示サイズを変更することでメイン画像やサムネイル画像が最適に配置されることにもご注目。

デモページ 1：幅1200pxで表示

デモページ 1：幅1400pxで表示

デモページ 1：幅800pxで表示

デモページ 1：幅480pxで表示

[ad#ad-2]

デモはもう一種類あり、こちらはオートプレイに対応しています。

デモページ 2

実装

HTML

メインとなるスライダー、サムネイル一覧、を2つのul要素で実装します。

<div id="ei-slider" class="ei-slider">
	<ul class="ei-slider-large">
		<li>
			<img src="images/large/1.jpg" alt="image01" />
			<div class="ei-title">
				<h2>Creative</h2>
				<h3>Geek</h3>
			</div>
		</li>
		<li>...</li>
	</ul>
	<ul class="ei-slider-thumbs">
		<li class="ei-slider-element">Current</li>
		<li>
			<a href="#">Slide 1</a>
			<img src="images/thumbs/1.jpg" alt="thumb01" />
		</li>
		<li>...</li>
	</ul>
</div>

CSS

スタイルシート全部はかなりのボリュームなので、ここでは一部のみ紹介します。

サムネイル画像のスタイルです。

Webkit系ブラウザでは、サムネイルに鏡面反射のスタイルを適用しています。

.ei-slider-thumbs li img{
	position: absolute;
	bottom: 50px;
	opacity: 0;
	z-index: 999;
	max-width: 100%;
    transition: all 0.4s ease;
	-webkit-box-reflect:
        below 0px -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(transparent),
            color-stop(50%, transparent),
            to(rgba(255,255,255,0.3))
            );
}

サムネイル画像はホバー時に、不透明度を調整してトップからスライドするようなエフェクトにしています。

.ei-slider-thumbs li:hover img{
	opacity: 1;
	bottom: 13px;
}

表示サイズが小さい場合（830px以下）、画像にタイトルがかぶらないように、別のレイアウトを用意しています。

デモページ 1：幅1200pxで表示
タイトルは画像の左に配置。

デモページ 1：幅800pxで表示
タイトルは画像の上に半透明なホワイトの背景を使って配置。

@media screen and (max-width: 830px) {
	.ei-title{
		position: absolute;
		right: 0px;
		margin-right: 0px;
		width: 100%;
		text-align: center;
		top: auto;
		bottom: 10px;
		background: rgba(255,255,255,0.9);
		padding: 5px 0;
	}
	.ei-title h2, .ei-title h3{
		text-align: center;
	}
	.ei-title h2{
		font-size: 20px;
		line-height: 24px;
	}
	.ei-title h3{
		font-size: 30px;
		line-height: 40px;
	}
}