[JS]画像とコンテンツを交互に配置する簡単実装でパララックスコンテンツを作成できるスクリプト -Parallax ImageScroll
Post on:2014年2月10日
sponsors
ページをスクロールすると、パララックスのエフェクトで次々に画像とコンテンツをカーテンを引き上げるように表示するjQuerのプラグインを紹介します。
もちろんレスポンシブにも対応、またタッチデバイスではパララックスのエフェクトが重く感じることもあるのでオン・オフの設定もできます。
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
