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

公開日：2020/09/24　／　更新日：2021/02/19

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

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

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

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

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

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

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

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

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

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

前回、calc計算で100vwを基準にすれば画像や要素の比率が維持できるというお話をしました。要素のアスペクト比（縦横比）を維持する方法しかしPCとなると話...

three.jsでweb上でも3Dを動かせるようにしてみました。ペットボトルの3Dはiidaさん作です。以下の画像をクリックして3Dページへ飛び、マウスホイ...

グラフ画像をただ置いておいても、円グラフはただの丸、棒グラフもただの棒の並びのように見えてしまい、なかなか注目されないものです。そこでグラフを動かすchart...

WEB：企業サイト、PRサイト、ランディングページ、バナー制作やCMS構築、モーショングラフィックス、VP、動画制作、パンフレット、ポスター、チラシ、DMなど制作から印刷・納品まで。お気軽にお問い合わせください。

お問い合わせはこちら