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

CSS3の美しいスタイル、Media Queries、jQueryを組み合わせた画像ギャラリーを紹介します。
サムネイルや見出しの見せ方、かっこいいです。

デモのキャプチャ

Elastic Image Slideshow with Thumbnail Preview

デモ

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

デモのキャプチャ

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

デモのキャプチャ

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

デモのキャプチャ

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

デモのキャプチャ

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

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

デモのキャプチャ

デモページ 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;
	}
}

top of page

©2017 coliss