ぷにおちゃん～シンプルなパララックスプラグインxPanelを試してみる

はじめに

１ページごとにスクロールするonepage-scrollプラグインを試してみるでは、１ページごとにスクロールするプラグインを紹介しましたが、xPanelは、pullupscrollのようにコンテンツをパララックス風にプルアップするプラグインです。

前提条件

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

ソフトウエア	バージョン
OS	Windows 7 Ultimate 32bit
Cygwin	Setup Version 2.831

xPanelの使用方法

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

環境設定

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

$ 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

CSSファイルの指定
xpanel.min.cssを指定します。
```
<link rel="stylesheet" href="xpanel/xpanel.min.css">
```

jsファイルの指定

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

<script src="xpanel/waypoints.min.js"></script>
<script src="xpanel/xpanel.js"></script>

コンテンツの作成

任意のクラス名を指定した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>

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からダウンロードできます。

Table of Contents

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

はじめに

前提条件

xPanelの使用方法