たった3ステップで実装可能!シンプルなパララックスプラグイン「parallax.js」

立体的な表現を可能にする、パララックス(視差効果)を実現するプラグインのご紹介です。
今回のプラグインはシンプルに背景のみ視差効果が発生するタイプです。

1.下記URLより「parallax.min.js」をダウンロードします。

GitHub

2.実装するhtmlに「jsファイル本体」と「parallax.min.js」を読み込ませます。
【記述例】
HTML(head内)
<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/parallax.min.js"></script>

3.body内の該当するhtml要素に下記のような形で画像を埋め込みます。
HTML(body内)
<section data-parallax="scroll" data-image-src="images/parallax_sample.jpg" /></section>
完成!!
「data-parallax=”scroll”」が記述されている要素に対してエフェクトが効くようです。

たったこれだけです!
注意点としてはスマートフォンには非対応なので、SP版は別途背景の設定が必要になるということでしょうか。
DEMO

1か月前