doors doors

慣性が効いたパララックスを求めて

  • HOME
  • MEMO
  • 【parallax】IEでも綺麗に動くパララックスを探してみた(追記あり)

【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 追記:
アンカーリンクを効かせるための工夫をこちらに記載しました。

jquery-inertiaScroll

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

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

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

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

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

関連記事

WEBデザイン|PhotoshopかIllustratorか…

WEBデザインをするならPSかAIか、という問題(その後・・・) アプリケーションに慣れているかということが最大の要因になると思いますが、Illustrator...

【WordPress】投稿をblogディレクトリに分けたら設定が大変だった

2020/12/29:追記こちらの記事は解決しました。 【WordPress/SEO】投稿(カスタムポスト)をblogディレクトリに分けてみた なぜうまくいかな...

chart.js

chart.jsでアニメーションするグラフを作ってみた

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

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

Illustrator|3Dとマテリアル

イラストレータの3Dが復活! しかもパワーアップして戻ってきました!  バージョ...

Dreamweaver|ライブラリのリンク

状況 Dreamweaverのライブラリを使用する場合で、トップページ(inde...

Brackets|サポート終了からその後・・・

Brackets|サポート終了からその後 結論からお伝えすると、今は「Brack...

Brackets|サポート終了

Brackets|突然、告げられるサポート終了 参りました・・・2021年9月を...