[JS]かなりかっこいいアニメーションを使ったスライドショーを実装するチュートリアル

スライドを単に次々と見せるだけでなく、切り替わる時に3Dのダイナミックでかっこいいエフェクトを与えたスライドショーを実装するチュートリアルを紹介します。

Slideshow with jmpress.js

[ad#ad-2]

• デモ
• 実装

デモ

まずは、そのダイナミックな3Dのアニメーションをご覧ください。

スライドは5枚あり、それぞれアニメーションが異なります。

デモページ：デフォルト

自動再生版です。

デモページ：自動再生

[ad#ad-2]

Responsiveデザイン対応、スライドのレイアウトもそれぞれ異なった版です。

デモページ：別レイアウト

実装

実装に使用しているスクリプトは先日当サイトで紹介した「jmpress.js」です。
紹介記事はこちら。

• 広大なカンバスを使って次々にコンテンツをスライドさせるスクリプト -jmpress.js

HTML

jmpress.jsのイメージは一枚の広大なカンバスにパネルを設置し、それをアニメーションでスライドする感じです。
実装は一枚の広大なカンバスとなるルート（section要素）に、各パネル（div要素）を配置します。

<section id="jms-slideshow" class="jms-slideshow">

	<div class="step" data-color="color-1">
		<div class="jms-content">
			<h3>Some headline</h3>
			<p>Some text</p>
			<a class="jms-link" href="#">Read more</a>
		</div>
		<img src="images/1.png" />
	</div>

	<div class="step" data-color="color-2" data-y="500" data-scale="0.4" data-rotate-x="30">
		<!-- ... -->
	</div>

	<!-- ... -->

</section>

JavaScript

ルートをjQueryのセレクタで指定し、スクリプトを実行します。また、スクリプトのオプションではサイズやマウス・キーボード操作などを設定できます。

jmpressOpts	: {
	// set the viewport
	viewPort 		: {
		height	: 400,
		width	: 1300,
		maxScale: 1
	},
	fullscreen		: false,
	hash			: { use : false },
	mouse			: { clickSelects : false },
	keyboard		: { use : false },
	animation		: { transitionDuration : '1s' }
},

スクリプトのオプションは他にもいろいろあります。

• jmpress.jsのオプション一覧

動作の設定

パネルの動作は各要素で設定が可能で、下記のように指定します。

<div class="step" data-color="color-2" data-y="500" data-scale="0.4" data-rotate-x="30">
	<!-- ... -->
</div>

元記事ではスクリプトの詳しい記述方法やスタイルシートなども解説されています。

• Slideshow with jmpress.js