シンプルなパララックスプラグインxPanelを試してみる

2014年06月16日 20時43分

201406162043HCSW00.png

前提条件

作業の前提条件は、下記のとおりです。

ソフトウエアバージョン
OSWindows 7 Ultimate 32bit
CygwinSetup Version 2.831

xPanelの使用方法

xPanelは、クラス名をdiv要素に指定するだけで使用できます。

  1. 環境設定

    設置に必要なアーカイブをダウンロードし、解凍します。

    $ cd /tmp
    $ wget -q https://github.com/drygiel/xPanel/archive/master.zip
    $ unzip -q master.zip
    $ mkdir xpanel
    $ mv xPanel-master/examples/waypoints.min.js xpanel
    $ mv xPanel-master/build/xpanel.min.css xpanel/
    $ mv xPanel-master/build/xpanel.js xpanel
    $ rm -fr xPanel-master
    
  2. CSSファイルの指定

    xpanel.min.cssを指定します。

    <link rel="stylesheet" href="xpanel/xpanel.min.css">
    
  3. jsファイルの指定

    waypoints.min.jsおよび、xpanel.jsを指定します。

    <script src="xpanel/waypoints.min.js"></script>
    <script src="xpanel/xpanel.js"></script>
    
  4. コンテンツの作成

    任意のクラス名を指定したdiv要素を使用して、コンテンツを作成します。

    <div class="example">
      <section>
        <p><img src="img/056-01.jpg" alt="/" title="草原"></p>
        <p><img src="img/056-03.jpg" alt="/" title="マンハッタン"></p>
      </section>
    </div>
    
  5. JavaScriptの指定

    xPanelのロードを行うJavaScriptを追加します。

    <script>
      $(function() {
        $(".example").waypoint('xpanel', { shadow: false });
      });
    </script>
    
    067.html
    <!DOCTYPE html>
    <html lang="ja">
      <head>
        <meta charset="utf-8">
        <!--[if IE]>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <![endif]-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <title>067</title>
    
        <link rel="stylesheet" href="bootstrap.min.css">
        <link rel="stylesheet" href="xpanel/xpanel.min.css">
    
        <style>
          body { background: #888; margin-top: 50px; }
          .navbar { background: #888; height: 50px; border: 0; }
          section {
            text-align: center;
            background: white;
          }
          section:nth-of-type(1) { background: #5274e9; }
          section:nth-of-type(2) { background: #9f945f; }
          section:nth-of-type(3) { background: #b29d9d; }
          section:nth-of-type(4) { background: #dbd070; }
          section:nth-of-type(5) { background: #b8f28c; }
        </style>
      </head>
    
      <body>
        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
          <div class="container">
            <div class="navbar-header"></div>
            <div class="navbar-collapse collapse"></div>
          </div>
        </div>
        <div class="example">
          <section>
            <p><img src="img/056-01.jpg" alt="/" title="草原"></p>
            <p><img src="img/056-03.jpg" alt="/" title="マンハッタン"></p>
          </section>
          <section>
            <p><img src="img/056-02.jpg" alt="/" title="レインボーブリッジ"></p>
          </section>
          <section>
            <p><img src="img/056-04.jpg" alt="/" title="向日葵"></p>
          </section>
          <section>
            <p><img src="img/056-05.jpg" alt="/" title="月"></p>
          </section>
          <section>
            <p><img src="img/056-06.jpg" alt="/" title="夜空"></p>
          </section>
        </div>
    
        <script src="bootstrap.min.js"></script>
        <script src="jquery-1.10.2.min.js"></script>
        <script src="xpanel/waypoints.min.js"></script>
        <script src="xpanel/xpanel.js"></script>
        <script>
          $(function() {
            $(".example").waypoint('xpanel', { shadow: false });
          });
        </script>
      </body>
    </html>
    
    デモは、067.htmlからご覧頂けます。
    ファイルは、067.zipからダウンロードできます。