[JS]画像とコンテンツを交互に配置する簡単実装でパララックスコンテンツを作成できるスクリプト -Parallax ImageScroll

サイト構築 -JavaScript

Post on:2014年2月10日

sponsorsr

ページをスクロールすると、パララックスのエフェクトで次々に画像とコンテンツをカーテンを引き上げるように表示するjQuerのプラグインを紹介します。

もちろんレスポンシブにも対応、またタッチデバイスではパララックスのエフェクトが重く感じることもあるのでオン・オフの設定もできます。

Parallax ImageScroll -GitHub

Parallax ImageScrollのデモ
Parallax ImageScrollの使い方

Parallax ImageScrollのデモ

デモはCSS3アニメーション対応ブラウザでご覧ください。
タッチデバイスはデモではオンになっています。

デモページ

スクロールすると、画像とコンテンツがかっこいいアニメーションで次々に表示されます。

Parallax ImageScrollの使い方

Step 1: 外部ファイル

</body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。

<body>
  ...
  コンテンツ
  ...
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="../jquery.imageScroll.js"></script>
</body>

Step2: HTML

画像とコンテンツを交互に配置します。
画像はdiv要素にHTML5のdata属性を使い、スクリプトで制御して表示します。

<body>
  <div class="img-holder" data-image="anImage.jpg" data-width="1600" data-height="900"></div>
  <section>画像の上にスライドさせるコンテンツ</section>
  <div class="img-holder" data-image="anotherImage.jpg" data-width="1600" data-height="900"></div>
</body>

Step 3: JavaScript

画像で使用しているclassをjQueryのセレクタで指定し、スクリプトを実行します。

    <script>
        $('.img-holder').imageScroll({
        });
    </script>

オプションではアニメーションのスピード、メディアの幅や高さ、パララックスの有無、タッチデバイスのオンオフなどを設定できます。

    <script>
        $('.img-holder').imageScroll({
//            image: null,
//            imageAttribute: 'image',
//            container: $('body'),
//            speed: 0.2,
//            coverRatio: 0.75,
//            holderMinHeight: 200,
//            extraHeight: 0,
//            mediaWidth: 1600,
//            mediaHeight: 900,
//            parallax: true,
//            touch: false
        });
    </script>