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

2014年06月18日 19時33分

201406181933HCSW00.png

前提条件

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

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

Parallax.jsの使用方法

Parallax.jsは、parallax-windowクラスをイメージ画像に指定するだけで使用できます。

  1. 環境設定

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

    $ cd /tmp
$ wget -q https://github.com/pixelcog/parallax.js/archive/master.zip
$ unzip -q master.zip
$ mv parallax.js-master parallax.js
$ rm -f master.zip
  2. jsファイルの指定

    parallax.min.jsを指定します。 

    <script src="parallax.js/parallax.min.js"></script>
  3. コンテンツの作成

    parallax-windowクラスを使用して、コンテンツを作成します。 

    <div class="parallax-window" data-parallax="scroll" data-image-src="img/056-01.jpg"></div>
<section>
  <h3>写真ACで見つけた草原の写真です。</h3>
</section>
    068.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>068</title>

    <link rel="stylesheet" href="bootstrap.min.css">

    <style>
      body, section {
        background: #bab7e0;
      }
      .navbar {
        background: #9f945f;
        height: 50px;
        border: 0;
      }
      section {
        text-align: center;
        min-height: 400px;
        margin: 0;
      }
      .parallax-window {
        min-height: 400px;
        background: transparent;
        margin: 0;
      }
    </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="parallax-window" data-parallax="scroll" data-image-src="img/056-01.jpg"></div>
    <section>
      <h3>写真ACで見つけた草原の写真です。</h3>
    </section>
    <div class="parallax-window" data-parallax="scroll" data-image-src="img/056-02.jpg"></div>
    <section>
      <h3>写真ACで見つけたレインボーブリッジの写真です。</h3>
    </section>
    <div class="parallax-window" data-parallax="scroll" data-image-src="img/056-03.jpg"></div>
    <section>
      <h3>写真ACで見つけたマンハッタンの写真です。</h3>
    </section>
    <div class="parallax-window" data-parallax="scroll" data-image-src="img/056-04.jpg"></div>
    <section>
      <h3>写真ACで見つけた向日葵の写真です。</h3>
    </section>
    <div class="parallax-window" data-parallax="scroll" data-image-src="img/056-05.jpg"></div>
    <section>
      <h3>足成で見つけた月の写真です。</h3>
    </section>
    <div class="parallax-window" data-parallax="scroll" data-image-src="img/056-06.jpg"></div>
    <section>
      <h3>写真ACで見つけた夜空の写真です。</h3>
    </section>

    <script src="bootstrap.min.js"></script>
    <script src="jquery-1.10.2.min.js"></script>
    <script src="parallax.js/parallax.min.js"></script>
  </body>
</html>
    デモは、068.htmlからご覧頂けます。
    ファイルは、068.zipからダウンロードできます。

▲