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

一枚の広大なカンバスにウェブサイトを設置するように、各コンテンツをダイナミックなスライドのアニメーションで表示するjQueryのプラグインを紹介します。

jmpress.js

[ad#ad-2]

• jmpress.jsのデモ
• impress.jsからの移行
• jmpress.jsの使い方

jmpress.jsのデモ

まずは、そのダイナミックなアニメーションが楽しめるデモページから紹介します。

デモページ

動きの仕組みは、下記ページを見るとよく分かると思います。

jmpress.jsの動きの仕組みのデモ

[ad#ad-2]

デモは他にもたくさんあります。
操作はマウスだけでなく、キーボード（スペース・矢印）にも対応しています。

Simple
シンプルなデモ。

Vaction
写真を使ったデモ。

Animation
さまざまなアニメーションが試せます。

Automatic Layout
レイアウトも変幻自在です。

Nested Templates
ネストしたコンテンツにも対応。

Zoomable
マウスホイールとキーボードで段階的に拡大・縮小。

デザインはjQuery UIのテーマにも対応しており、さまざまなデザインが簡単に利用できます。

テーマ左上から、base、sunny、le-frog、ui-darkness

対応ブラウザは、下記の通りです。
iPadも対応というのはいいですね。

• Chrome/Chromium
• Safari
• Firefox
• IE
• Opera
• iPad

impress.jsからの移行

jmpress.jsは「impress.js」のjQuery版で、impress.jsの特徴全てと更に多くの機能を備えています。
impress.jsから移行するには、jquery.jsを加え、スクリプトをimpress.jsからjmress.jsにし、スクリプトの呼び出しを「$(selector).jmpress(); 」に変更します。

impressのデモをjmpress.jsで動かしたデモ

jmpress.jsの使い方

HTML

ルートとなるdiv要素に「id="jmpress"」をつけ、各コンテンツをdiv要素で配置します。

<div id="jmpress">
	<div class="step">Slide 1</div>
	<div class="step">Slide 2</div>
</div>

JavaScript

対象となるコンテンツをjQueryのセレクタで指定し、jmpressを実行します。

$(function() {
	$('#jmpress').jmpress();
});

スライドアニメーションの設定

スライドアニメーションは個々の要素に設定します。

<div id="name-of-slide" class="step" 
		data-x="3500" data-y="-850" 
		data-rotate="270" data-scale="6">
	Slide 1
</div>

詳しい実装方法は、ドキュメントが用意されています。

• jmpress.js -Docs