「luxy.js」はパララックスを簡単に実装できるjavascriptプラグインです。正直パララックスが苦手なのですが「luxy.js」で比較的楽に実装できたのでメモします。また日本人が作成したプラグインということで様々な解説サイトがあるのもポイント高いです。

ただ、モバイルフレンドリーかと言われれば、少し悩みます。ただの勉強不足ですが、デモでは力技でなんとかしてみました。

luxy.jsをダウンロード

ひとまず、プラグインをダウンロードしてましょう

ダウンロード

プラグインの読み込みとjavascriptを記述

まずはプラグインを</body>の前に読み込みましょう。申し訳ないですが、オリジナルの階層でご紹介します。

<script src="js/luxy.js" charset="utf-8"></script>

続いてjavascriptを記述します。
この時点でオプションも設定しています。

<script>
luxy.init({
wrapper: '#luxy',
targets : '.luxy-el',
wrapperSpeed: 0.08
});
</script>

慣性スクロールの設定

スクロールするとページがじわじわと止まる慣性スクロールありますね。以下で設定しています。
ちなみにfixedを使っている要素には効かないので注意してください。

wrapper: '#luxy-wrap',

この場合ID属性luxyに設定しています。

<div id="luxy-wrap">
コンテンツ
</div>

慣性スクロールの速度

慣性スクロールの速度はwrapperSpeedで設定します。

wrapperSpeed: 0.08

パララックスの設定

パララックス効果は以下で設定しています。

targets : '.luxy-col',

この場合CLASS属性luxy-colに設定しています。効果を適用してい場合は、class=”luxy-el”を該当箇所に設定してください。

<div id="luxy-wrap">
<div class="luxy-col">SAMPLE Luxy</div>
</div>

luxy.jsのパララックス効果は速度や位置などを細かく指定できるオプションが用意されています。

縦方向のパララックス効果の速度をdata-speed-y属性で設定し、offsetをdata-offset属性で指定します。

<div class="luxy-col" data-speed-y="2" data-offset="-50">SAMPLE Luxy</div>

水平方向の移動は、data-horizo​​ntalに「1」を設定し、data-speed-x属性に水平方向の速度を指定します。

<div class="luxy-col" data-speed-x="2" data-offset="-50" data-horizontal="1">SAMPLE Luxy</div>

基本的にはこれだけで、パララックスサイトが作成できます。

ただ、やはりレスポンシブでは調整が面倒だというケースもデザインによってはあるので、その場合は条件分岐を使用してPCのみに適用するなど対応しましょう。
以下ではウィンドウサイズで設定しています。SP版は適用したくないので640ピクセル未満のサイズにはluxyを適用していません。
その他、タブレットとPCサイズも一応設定しています。

$windowWidth = window.innerWidth;
$breakPointA = 640;
$breakPointB = 769;

isMobileSize = ($windowWidth < $breakPointA);
isTabletSize = ($windowWidth <= $breakPointB) && ($windowWidth > $breakPointA);
isPcSize = ($windowWidth > $breakPointB);
if(isMobileSize){ 
}
else{
luxy.init({
wrapper: '#luxy-wrap',
targets : '.luxy-col',
wrapperSpeed: 0.08
});
}

デバイスでもできるので、適宜それぞれで設定いただければと思います。

デモを作成しました。
それっぽい感じになってるかな？
ただレスポンシブは、力技ですね…..。

デモ