マウスの位置や動きに合わせて背景の画像が動くパララックスの作り方です。スクロールではなくマウスの位置に反応して上下左右に動きます。実際の動きはページ最後のデモをご覧ください。
事前準備
CDNからparallax.min.jsを読み込みます。（公式サイトにもデータがありますが、こちらは更新されていないためかエラーが出て動作しませんでした。）
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>JavaScriptファイルで画像の読み込みと動きを設定する
重ねたい背景画像を、レイヤーの奥から順に読み込みます。一番上にしたい画像はHTMLでは一番下になります。動きの大小はカスタムデータ属性の「data-depth」で設定します。数値が大きいほど画像の動きも大きく、数値が小さいほど画像の動きも小さくなります。
<div id="layer">
<div data-depth="0.1" class="layer layer1"><img src="bg.jpg" alt="" /></div>
<div data-depth="0.4" class="layer layer2">
<img src="cloud_02.png" alt="" />
</div>
<div data-depth="0.8" class="layer layer3">
<img src="cloud_01.png" alt="" />
</div>
</div>パララックスを動作させます。CSSでレイヤーの重なりを指定する必要もなくこれだけで完成します。
var layer = document.getElementById("layer");
var parallax = new Parallax(layer);デモページのようにウィンドウ幅いっぱいの背景画像に使用する場合、画像の動きが大きいと、画像と画面に余白が生じてしまうため、画像をやや大きくするなどCSSでの調整が必要です。
そのほかオプションで動く速度や動きの反転、カーソルの初期位置などを調整できます。ここにないオプションは公式のGitHubページでご確認ください。
var layer = document.getElementById("layer");
var parallax = new Parallax(layer, {
clipRelativeInput: true, //要素の端にカーソルが達したら動きを止める
hoverOnly: true, //カーソルが要素の上にある場合のみ有効
invertX: true, //X軸の動きを反転。falseにするとマウスと同じ方向に動く
invertY: true, //Y軸の動きを反転。falseにするとマウスと同じ方向に動く
limitX: false, //X軸の動きを制限する
limitY: false, //Y軸の動きを制限する
scalarX: 10.0, //X軸の移動速度と範囲を増減
scalarY: 10.0, //Y軸の移動速度と範囲を増減
frictionX: 0.1, //X軸のレイヤーの速度。0.00〜1.00の範囲内で指定可能
frictionY: 0.1, //Y軸のレイヤーの速度。0.00〜1.00の範囲内で指定可能
originX: 0.5, //X軸のマウスの初期位置。デフォルトの0.5は画面または要素の中心
originY: 0.8, //Y軸マウスの初期位置。デフォルトの0.5は画面または要素の中心
});デモ
「jQueryで作るマウスに合わせて背景が動くパララックス」のデモはこちら