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

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

サイトのキャプチャ

Slideshow with jmpress.js

デモ

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

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

デモのキャプチャ

デモページ:デフォルト

自動再生版です。

デモのキャプチャ

デモページ:自動再生

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

デモのキャプチャ

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

実装

実装に使用しているスクリプトは先日当サイトで紹介した「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' }
},

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

動作の設定

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

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

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

top of page

©2017 coliss