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か、はたまたXDかという議論

2大巨頭のPhotoshopとIllustrator、そこへ参入する新生XD この課題はアプリケーションの習熟度やコーディングを受け持つエンジニアの視点から検討...

【CSS】比率指定にも使える!heightとpadding、marginの計算方法

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

wordpress01

サイト構築でCMSをオススメする理由

WEBサイトの管理、どうしていますか? 今やどの企業でさえもWEBサイトを持っているのが当たり前の時代になっています。 しかしWEBサイトを作っただけで満足する...

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

花粉症との戦い

花粉症の季節がやってきてしまいました。 今年は去年より多いそうで、筆者は戦慄して...

進化したGoogle レンズ

写真や画像に関連する情報を取得したいなら、「Googleレンズ」が便利です。 こ...

もうすぐ節分!ことしは2月2日

早いもので1月があっという間に過ぎ、2月を迎えようとしています。 2月といえば節...

右横文字のアイキャッチ画像

はたらくクルマの“右横書き”に見る、風習や習慣の変化について。

トラックや業務用車両の右側面によく見かける、右から左に向かって書かれている「右横...