• WEB

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

  • えーちゃん
    えーちゃん デザインちーむ
  • このエントリーをはてなブックマークに追加
3Dダイナミックスライド「jmpress」

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

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

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

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

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

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

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

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

※「jmpress.js」は任意のフォルダに格納してください

対応ブラウザ

  • IE 10以上
  • Firefox 10以上
  • Chrome 20以上
  • Safari 4以上

HTMLの作成

JavaScriptを読み込む記述をします。


<script src="http://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="http://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.

このエントリーをはてなブックマークに追加

えーちゃんが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ