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

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

サイトのキャプチャ

jmpress.js

jmpress.jsのデモ

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

デモのキャプチャ

デモページ

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

サイトのキャプチャ

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

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

デモのキャプチャ

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>

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

top of page

©2017 coliss