【parallax】IEでも綺麗に動くパララックスを探してみた（追記あり）

スクロールすると背景が止まって見えたり、要素が動くパララックス。
パララックスのライブラリはいくつか存在しますが、IEのために見直すことにしました。

IEでカクつくパララックスの真相

IEは背景を「fixed」にして固定しているだけで、スクロール時にガクガクしてしまうのです。
背景を固定にしてbackground:positionを動かすものは多く存在します。
これを避けようという考えに至りました。

また、マウスホイールのカクカクに対して、動いたpixel数分だけ背景が反応し、ピタっと止まってしまうものも避けたいです。
これは慣性スクロールで防げると感じました。

IE用パララックスライブラリの条件

• background-position : fixed　機能は無くても良い
• 慣性スクロールがついている

background-positionを動かすものはいらないと考えました。
これは親要素のobject-fitとoverflow:hiddenを組み合わせれば良いことです。
なので慣性スクロールがIEでも効くもの中心でいきます。

Luxy.js

Luxy.js

こちら超お手軽に実装することが可能でした。
Luxy.jsは画面の全てを支配します。
故にスクロールしてアクティブになっていくアンカーリンクは工夫をしない限り効きません。
注意です。

2021/2/19 追記：
アンカーリンクを効かせるための工夫をこちらに記載しました。

https://d-doors.co.jp/nagoya/blog/web/positionfixed/

jquery-inertiaScroll

こちらは慣性スクロール中心です。

https://github.com/underground0930/jquery-inertiaScroll

アンカーリンクも効きます。
注意点としては親要素の設定が必要となる、ということくらいでしょうか。
詳細な説明はこちらでもされています。

https://github.com/jjungdesign/jquery-inertiaScroll

これでIEでも慣性スクロールする理想のパララックスを実現することができました。
jsプラグインを作ってくださる方々に感謝です。