2014.09.04
WEB

簡単3Dダイナミックスライドを演出「jmpress」の使い方紹介

えーちゃんデザインちーむ

今回は3Dのダイナミックなスライドを演出するjQueryプラグイン「jmpress」に触れてみたいと思います。

ストーリー演出を目的としたWebコンテンツ、またはHTMLベースのプレゼン資料などとしてもご活用いただけます。

やはり動きのあるコンテンツは、受け手に与える表現の幅も広がり、デザイナー心をくすぐりますね（・∀・）
それでは以下の順で見ていきましょう。

1 「jmpress」によるダイナミックスライドDEMO
2 使用するライブラリ/プラグインと対応ブラウザ
- 2.1 使用するライブラリ/プラグイン
- 2.2 対応ブラウザ
3 HTMLの作成
4 JavaScriptとCSSの作成
- 4.1 JavaSpriptの記述
- 4.2 CSSの記述（一例）
5 さいごに

「jmpress」によるダイナミックスライドDEMO

さっそくですが、jQueryプラグイン「jmpress」を使ったダイナミックスライドのDEMOサイトを見てみましょう。

3DダイナミックスライドDEMO
DEMOはこちらから
※DEMOはPCよりご覧ください

使用するライブラリ/プラグインと対応ブラウザ

使用するライブラリ/プラグイン

※「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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;う、動ける。</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.

2016.05.20

Photoshopのオブジェクトカラーを一括変更！超便利なプ

えーちゃん
デザインちーむ / プロデューサー
趣味：カメラ、散歩、ねこ特技：器械体操歴12年座右の銘：Actions speak louder than words. 前職：グラフィックデザイナー前世：おそらく西洋人一言：楽しい仲間とサイト作ったりデザインしたり、あーだこーだしています。『これを知る者はこれを好む者に如かずこれを好む者はこれを楽しむ者に如かず』弊社にご興味ある方は採用情報まで