Enllax.jsのご紹介です。
See the Pen Enllax.js by Saki (@SAKI) on CodePen.
Enllax.jsとは
画面スクロールでのパララックス効果を簡単に実装できる超軽量（最新版1.53KB）jQueryプラグインです。
背景、コンテンツ要素（前景）どちらにも適用できます！
※jQueryが必要です。
ダウンロード
Enllax.js :
https://github.com/mmkjony/enllax.js
デモ :
http://mmkjony.github.io/enllax.js/
使い方
[2024/6/13] SmoothScroll.min.js、jquery バージョン変更
jQueryライブラリを読み込んだ後で、
●https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js
→なくても動きますが、スムースな動きのために当てましょう！
●enllax.js
を読み込みます。
html<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script>
<script src='.../js/enllax.js'></script>
そのあとに、スクリプトで起動します。
html<script>
$(window).enllax();
//または
$('#some-id').enllax(); // #some-idは、効果対象要素の親
</script>
親要素を指定しても #some-id以外の要素にもパララックス効果が反映されますので、結局のところ
$(window).enllax();
これだけあればよい感じです。
パララックス要素
スクロールパララックス効果は、背景（css background）スクロールと前景（コンテンツ要素）スクロールの2タイプあり、異なるスピードで、垂直方向・水平方向に適用できます。
パララックススピード
まず、パララックス効果を出す要素に、データ属性（data-enllax-ratio）でスピードをを設定します。
data-enllax-ratio = 1 が通常の状態 →結果的にスクロールしない状態で、カクカクした動きになります。
値が少ないほど遅くなります。
●背景（css background）の場合
html<div data-enllax-ratio=".5">...</div>
●前景（コンテンツ要素）の場合
html<img src="path/to/image" data-enllax-ratio=".5" data-enllax-type="foreground" />
※デフォルトはbackgroundですので、前景要素の場合は、data-enllax-type="foreground"を指定すること！
スクロール方向の指定
data-enllax-direction で指定します。
垂直方向 : data-enllax-direction="vertical" →デフォルト（指定しなくてok）
水平方向 : data-enllax-direction="horizontal"
html<img src="path/to/image" data-enllax-ratio=".5" data-enllax-type="foreground" /> →垂直方向
<img src="path/to/image" data-enllax-ratio=".5" data-enllax-type="foreground" data-enllax-direction="horizontal" /> →水平方向
※デフォルトはverticalですので、水平方向にスクロールしたいときに data-enllax-direction="horizontal" をセットすればokです。
デフォルト値の変更
Enllax.js のデフォルト値は、
●タイプ(type) ： 背景(background)
●スピード(ratio) ： 0 ...スクロールスピードの乗数
●方向(direction) ： 垂直(vertical)
で、プラグイン起動時に設定できます。
Enllax.jsのデフォルト<script>
$(window).enllax();
// 以下と同じ
$(window).enllax({
type: 'background',
ratio: 0,
direction: 'vertical'
});
</script>
※スクロール要素にdata-enllax-ratio（スピード）をセットするため、スピード(ratio)をデフォルト変更してもその値が使われることはないと思われます。
* * *
以上。Enjoy!!!
