今回は3Dのダイナミックなスライドを演出するjQueryプラグイン「jmpress」に触れてみたいと思います。
ストーリー演出を目的としたWebコンテンツ、またはHTMLベースのプレゼン資料などとしてもご活用いただけます。
やはり動きのあるコンテンツは、受け手に与える表現の幅も広がり、デザイナー心をくすぐりますね（・∀・）
それでは以下の順で見ていきましょう。
目次
「jmpress」によるダイナミックスライドDEMO
さっそくですが、jQueryプラグイン「jmpress」を使ったダイナミックスライドのDEMOサイトを見てみましょう。
DEMOはこちらから
※DEMOはPCよりご覧ください
使用するライブラリ/プラグインと対応ブラウザ
使用するライブラリ/プラグイン
- jQueryhttp://jquery.com/download/http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
- jmpresshttp://jmpressjs.github.io/docs/downloads.html
※「jmpress.js」は任意のフォルダに格納してください
対応ブラウザ
- IE 10以上
- Firefox 10以上
- Chrome 20以上
- Safari 4以上
HTMLの作成
JavaScriptを読み込む記述をします。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/javascripts/jquery.min.js"><\/script>')</script>
<script type="text/javascript" src="javascripts/jmpress.js"></script>実際にHTMLを書いてみましょう。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<title>3Dスライドサンプル｜jmpress プラグイン</title>
<link rel="stylesheet" type="text/css" href="css/hoge.css"/>
</head>
<body>
<div id="jmpress">
<div id="test01" class="step slide" data-x="0" data-y="-2200">
<h1>ダイナミックなスライドで</h1>
<p>◆使用ライブラリ：【jQuery】【jmpress】</p>
<p>◆対応ブラウザ：【IE：10以上】【Firefox：10以上】【Chrome：20以上】【Safari：4以上】</p>
</div>
<div class="step slide" data-x="0" data-y="-1500">
<h1>縦横無尽に</h1>
</div>
<div class="step" data-x="1500" data-y="-1500" data-rotate-y="180" data-rotate-x="180" data-scale="1">
<img width="489" height="346" src="images/sample.png"/>
<h1> う、動ける。</h1>
</div>
<div id="test02" class="step" data-x="0" data-y="500" data-scale="4">
<h1>インパクトあるプレゼンも実現</h1>
</div>
<div id="test03" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
<h1>できます。</h1>
</div>
<div id="test04" class="step" data-x="3100" data-y="3500" data-rotate="90" data-scale="0">
<p>そして、</p>
</div>
<div id="test05" class="step" data-x="3500" data-y="2100" data-rotate-y="180" data-rotate-x="180" data-scale="3">
<p>基本的に <b>HTML+CSS</b></p>
<p>によって作成できます。</p>
</div>
<div id="test06" class="step" data-x="3500" data-y="-1500" data-rotate="270" data-scale="5">
<p><b class="positioning">こんなことも</b>、<b class="rotating">こんなことも</b> 、<b class="scaling">こんなことも</b>。</p>
</div>
<div id="test07" class="step" data-x="6700" data-y="-300" data-scale="6">
<p><b class="test07">ぜひ活用してみてください</br>（・∀・）</b></p>
</div>
<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
</div>
</div>
<div class="hint">
<p>スペースキーか矢印キーで進みます</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/javascripts/jquery.min.js"><\/script>')</script>
<script type="text/javascript" src="javascripts/jmpress.js"></script>
<script type="text/javascript">
$(function () {
$('#jmpress').jmpress({
});
});
</script>
</body>
</html>※各コンテンツを示すdivのclassには「step」を指定する。
- ＜属性の一例＞
-
- 「data-x=” “」＝X軸の配置
- 「data-y=” “」＝Y軸の配置
- 「data-z=” “」＝Z軸の配置
- 「data-rotate=” “」＝2D回転角度
- 「data-rotate-x=” “」＝X軸の3D回転角度
- 「data-rotate-y=” “」＝Y軸の3D回転角度
- 「data-rotate-z=” “」＝Z軸の3D回転角度
- 「data-scale=” “」＝縮尺比率
JavaScriptとCSSの作成
JavaSpriptの記述
$('#jmpress').jmpress({
});
CSSの記述（一例）
#test06.active .positioning {
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
-o-transform: translateY(-20px);
transform: translateY(-20px);
-webkit-transition-delay: 1.5s;
-moz-transition-delay: 1.5s;
-ms-transition-delay: 1.5s;
-o-transition-delay: 1.5s;
transition-delay: 1.5s;
}
#test06.active .rotating {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
transform: rotate(-15deg);
-webkit-transition-delay: 1.75s;
-moz-transition-delay: 1.75s;
-ms-transition-delay: 1.75s;
-o-transition-delay: 1.75s;
transition-delay: 1.75s;
}
#test06.active .scaling {
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition-delay: 2s;
-moz-transition-delay: 2s;
-ms-transition-delay: 2s;
-o-transition-delay: 2s;
transition-delay: 2s;
}
さいごに
いかがでしたでしょうか？
使い方によっては訴求力のアップにもつながりますし、魅力的なコンテンツとして演出してれます。
そして、属性の役割さえ覚えれば、HTMLとCSSで比較的簡単に作れるので、気軽に導入できそうですね◎
これで準備は整いました。
いざ、ダイナミックスライド。
No DynamicSlide No Creative.
