NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

「Cool Carousels」でつくる、画像をマウスオーバーした時にスライドさせてテキストを表示する

2014年12月2日jQueryプラグイン活用

「Cool Carousels」でつくる、画像をマウスオーバーした時にスライドさせて文字を表示する

jQueryプラグイン「Cool Carousels」を使って、画像をマウスオーバーした時にスライドしてくるアニメーションでテキストを表示する仕組みをつくることができます。

デモページ

JavaScript

(function($){
	$(function() {
		$('#photo > figure').each(function() {
			var $cfs = $(this);
			$cfs.carouFredSel({
				direction: 'up',
				circular: false,
				infinite: false,
				auto: false,
				scroll: {
					easing: 'quadratic',
					queue: 'last'
				},
				items: {
					visible: 1,
					width: 237,
					height: 156
				}
			});
			$cfs.hover(
				function() {
					$cfs.trigger('next');
				},
				function() {
					$cfs.trigger('prev');
				}
			);
		});
	});
})(jQuery);	

HTML

<div id="photo">
	<figure>
		<img src="img01.jpg" width="237" height="156" />
		<figcaption>photo01</figcaption>
	</figure>
	<figure>
		<img src="img02.jpg" width="237" height="156" />
		<figcaption>photo02</figcaption>
	</figure>
	<figure>
		<img src="img03.jpg" width="237" height="156" />
		<figcaption>photo03</figcaption>
	</figure>
</div>

CSS

.caroufredsel_wrapper {
	margin: 0 !important;
}
#photo {
	margin: 0 auto;
	width: 711px;
}
#photo figure {
	display: block;
	width: 237px;
	height: 156px;
	float: left;
}
#photo figure figcaption {
	display: block;
	background-color: #ffbc30;
	width: 237px;
	height: 156px;
	color: #ffffff;
	padding: 15px 20px;
	box-sizing: border-box;
}

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. 「Cool Carousels」でつくる、画像をマウスオーバーした時にスライドさせてテキストを表示する

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com