IE7も対応しているパララックスエフェクトのスライダープラグイン「jQuery Destaque」

  • Posted on
  • Category : Tips
IE7も対応しているパララックスエフェクトのスライダープラグイン「jQuery Destaque」

パララックス効果が付いたスライダーをいろいろと探したり試していたところ、「jQuery Destaque」というjQueryプラグインが手軽さやサポートブラウザなど、総合的に一番いい感じだったので備忘録兼ねて紹介します。CSS3を併用したものやモダンブラウザのみ問題なく動くプラグインなどであれば他にも沢山ありますが、これはサポートブラウザにIE7+も含まれていたり、設置方法や動きもシンプルなのでカスタマイズもしやすいかと思います。

jQuery Destaque

プラグイン自体は「かちびと.net」さんでも以前紹介されていますし、そんなに目新しいものではないです。
動きとしては画像がスライドされた後に少し遅れてテキストがスライドしてくる感じのものです。
また、ページネーションでのスライド切り替えだけでなく、キーボードの矢印キー(←・→)でのスライド切り替えもできます。
以下、デモになります。

デモではシングルとマルチプルの2タイプのスライダーがありますが、以下で紹介するのはデモページ上部にあるシングルタイプのみの場合です。
マルチプルタイプを使用する場合はデモや配布サイトを参考に諸々変更してください。

IE7も対応しているパララックスエフェクトのスライダープラグイン「jQuery Destaque」 目次

  1. サポートブラウザ
  2. 設置方法
  3. ページネーションを追加する

1. サポートブラウザ

  • IE 7+
  • Firefox 3.6+
  • Chrome 4+
  • Safari 5+
  • Opera 10.10+

※上記でサポートはIE7+としていますが、さらっと確認したところIE6でも大きな崩れはない感じでした。

目次へ

2. 設置方法

設置に必要なプラグインと配布先は以下になりますので、用意して予め読み込ませます。

  • jQuery 1.7.2 (jQuery
  • jQuery UI 1.8.18 (jQuery UI
  • jquery.mobile.events.js (jQuery Mobile Events
  • jquery.transition.js (jQuery Transition
  • jquery.destaque.js (destaque

HTML - head

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.transition.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile.events.js"></script>
<script type="text/javascript" src="js/jquery.destaque.js"></script>

※ファイル名やパスは環境に合わせて書き換えてください。

各プラグインを読み込ませたら、以下をそれぞれ記述します。
jQueryはhead内に記述するか、もしくは外部ファイル化して読み込ませてください。

HTML

<div id="slide-container">
	<div class="item">
		<a href="#">
			<div class="background">
				<img src="img_slide01.jpg" alt="Slide01"/>
				<div class="overlay"></div>
			</div>
			<div class="foreground">
				<div class="element icon"></div>
				<div class="element title">Slide01</div>
				<div class="element subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed lacus vel mi imperdiet mollis. Nulla at nisi quam, at porta magna.</div>
			</div>
		</a>
	</div>
	
	<div class="item">
		<a href="#">
			<div class="background">
				<img src="img_slide01.jpg" alt="Slide01"/>
				<div class="overlay"></div>
			</div>
			<div class="foreground">
				<div class="element icon"></div>
				<div class="element title">Slide01</div>
				<div class="element subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed lacus vel mi imperdiet mollis. Nulla at nisi quam, at porta magna.</div>
			</div>
		</a>
	</div>
	
	<!-- the same markup for other items -->
</div>

<ul id="slide-pagination">
	<li><a rel="prev" href="#">&larr; Previous</a></li>
	<li><a rel="next" href="#">Next &rarr;</a></li>
</ul>

※使用したい分だけ<div class="item"> ~ </div>部分を記述。

CSS

#slide-container {
	position: relative;
	width: 960px;
	height: 540px;
	background-color: #fff;
	border: 1px solid #000;
	overflow: hidden;
}
.item {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.item a {
	display: block;
	width: 960px;
	height: 540px;
}
.item .background img {
	max-width: 960px; /* to avoid max-width: 100% of Twitter Bootstrap */
}
.foreground {
	position: absolute;
}
.foreground .element {
	position: relative;
	left: 130px;
	width: 500px;
	color: #fff;
	text-shadow: 1px 1px 2px #000000;
}
.foreground .element.icon {
	top: 340px;
	left: 60px;
	width: 114px;
	height: 114px;
	background: transparent url(../img/play.png) no-repeat;
	background-position: 0 0;
}
.background {
	position: absolute;
	overflow: hidden;
}
.background .overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50%;
	background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, transparent), color-stop(80%, rgba(0, 0, 0, 0.8)));
	background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.8) 80%);
	background: -moz-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.8) 80%);
	background: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.8) 80%);
	background: -ms-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.8) 80%);
	background: linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.8) 80%);
}
.foreground .element.title {
	top: 280px;
	font-size: 40px;
	text-transform: uppercase;
}
.foreground .element.subtitle {
	top: 300px;
	font-size: 17px;
}
.ui-loader {
	display: none;
}

※上記はページネーション部分のスタイルは含まれていません。

jQuery

$(function () {
	$("#slide-container").destaque({
		slideMovement: 100,
		slideSpeed: 1000,
		elementSpeed: 1100,
		easingType: "easeInOutExpo",
		itemSelector: ".item",
		itemForegroundElementSelector: ".foreground .element",
		controlsSelector: "#slide-pagination a"
	});
});

上記ソースではスライドする画像1枚に対してclass="element"が指定されている2種類のテキストと1種類の画像(背景画像)が遅れてスライドしてくる要素として設定されていますが、同様に追加したい要素を記述してスタイルを調整すれば簡単に増やすことができます。
各要素の位置はposition: absolute指定されているので、表示する場所を変えたい場合は変更します。

また、オプションでは各要素のスピードや動き、スライドのオートプレイの有無やマウスオン時の設定などができます。
オプションについての詳細は以下。

目次へ

3. ページネーションを追加する

ページネーションを追加する

先ほどのソースでは「← Previous」と「Next →」という前後へのページ送りが付くのですが、普段こういったスライダープラグインでよく見かける1枚目、2枚目といったようなページネーションも追加する方法です。
それぞれ以下のように追記・変更します。

HTML

<ul id="slide-pagination">
	<li><a rel="prev" href="#">&larr; Previous</a></li>
	<li><a rel="next" href="#">Next &rarr;</a></li>
</ul>

<!-- ここから下を追記 -->
<ul id="slide-indicator">
	<li><a href="#" class="active" rel="0">1</a></li>
	<li><a href="#" rel="1">2</a></li>
	<li><a href="#" rel="2">3</a></li>
	<li><a href="#" rel="3">4</a></li>
</ul>

jQuery

$(function () {
	var destaque = $("#slide-container").destaque({
		slideMovement: 100,
		slideSpeed: 1000,
		elementSpeed: 1100,
		easingType: "easeInOutExpo",
		itemSelector: ".item",
		itemForegroundElementSelector: ".foreground .element",
		controlsSelector: "#slide-pagination a",
		onPageUpdate: function(destaque, pageData) {
			$("#slide-indicator a").removeClass("active");
			$("#slide-indicator a[rel='"+ pageData.currentSlide +"']").addClass("active");
		}
	});
	
	$("#slide-indicator a").click(function(e) {
		e.preventDefault();
		destaque.goTo(parseInt($(this).attr("rel"), 4));
	});
});

上記のようにHTMLは<div id="slide-indicator"> ~ </div>を追記、jQueryは変更もしくは追記を行い、あとはCSSで見栄えを整えます。
HTML、jQueryともにスライド枚数が4枚時の記述になっており、選択時にactiveというクラスを付加させるようになっていますので、枚数や環境に合わせて各自で変更してください。
簡単なものですがサンプルを用意したので、実際の動きは以下よりどうぞ。

ページネーション追加は以下を参考にしました。

目次へ

Back to Top

IE7も対応しているパララックスエフェクトのスライダープラグイン「jQuery Destaque」

IE7も対応しているパララックスエフェクトのスライダープラグイン「jQuery Destaque」

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。