[JS]広大なカンバスを使って次々にコンテンツをスライドさせるスクリプト -jmpress.js
Post on:2012年3月21日
一枚の広大なカンバスにウェブサイトを設置するように、各コンテンツをダイナミックなスライドのアニメーションで表示するjQueryのプラグインを紹介します。
![サイトのキャプチャ](/wp-content/uploads-2012/2012032102.png)
[ad#ad-2]
jmpress.jsのデモ
まずは、そのダイナミックなアニメーションが楽しめるデモページから紹介します。
![デモのキャプチャ](/wp-content/uploads-2012/2012032102.png)
動きの仕組みは、下記ページを見るとよく分かると思います。
![サイトのキャプチャ](/wp-content/uploads-2012/2012032103.png)
[ad#ad-2]
デモは他にもたくさんあります。
操作はマウスだけでなく、キーボード(スペース・矢印)にも対応しています。
![デモのキャプチャ](/wp-content/uploads-2012/2012032105-01.png)
Simple
シンプルなデモ。
![デモのキャプチャ](/wp-content/uploads-2012/2012032105-02.png)
Vaction
写真を使ったデモ。
![デモのキャプチャ](/wp-content/uploads-2012/2012032105-03.png)
Animation
さまざまなアニメーションが試せます。
![デモのキャプチャ](/wp-content/uploads-2012/2012032105-04.png)
Automatic Layout
レイアウトも変幻自在です。
![デモのキャプチャ](/wp-content/uploads-2012/2012032105-05.png)
Nested Templates
ネストしたコンテンツにも対応。
![デモのキャプチャ](/wp-content/uploads-2012/2012032105-06.png)
Zoomable
マウスホイールとキーボードで段階的に拡大・縮小。
デザインはjQuery UIのテーマにも対応しており、さまざまなデザインが簡単に利用できます。
![サイトのキャプチャ](/wp-content/uploads-2012/2012032104.png)
テーマ左上から、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(); ﹂に変更します。![デモのキャプチャ](/wp-content/uploads-2012/2012032101.png)
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>
詳しい実装方法は、ドキュメントが用意されています。
sponsors