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

Post on:2014年2月10日

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

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

サイトのキャプチャ

Parallax ImageScroll -GitHub

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>

sponsors

top of page

©2024 coliss