シンプルで簡単なパララックスjQueryプラグイン(IE非対応)

初心者でも分かりやすく作り変えやすいパララックスjQueryプラグインをご紹介します。

jQueryプラグイン[parlx.js]を使えば、パララックス効果を簡単に導入する事ができます。

ただし、Internet explorerには非対応ですのでご注意ください。

 

コピペしやすいようシンプルにまとめてありますのでどうぞお使いください。

 

まずjQuery[parlx.js]を導入してからお使いください。

[parlx.js]は以下のリンク先から入手できます。

GitHub : https://github.com/JB1905/parlx.js

↓以下が実際のソースサンプルです。

 

▼html
background-imageのurlを入れ替えてお使いください。

▼css

▼jQuery

 

オプション設定
用意されているオプションは「speed」「height」「mobile」の3つが用意されています。

speed 「0.3」が初期値
height 「400px」が初期値
mobile 「true」が初期値

独自データ属性で指定する場合

jQueryで指定する場合

 

今回、参考にさせていただいたのは、『 オンズ開発ブログ 』さんです。 ありがとうございます。

 

デモページは、こちら