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プラグインを作ってくださる方々に感謝です。

関連記事

number

【Javascript・JQuery】カウントアップを複数動かしながら画面内でスタートさせるためには

「カウントアップ」 数字がくるくるして表示されるアレです。 プラグイン入れてちょちょいとやってしまえばいいやー!と思っていましたが意外と遠回りしました。 スクロ...

【javascript】three.jsを触ってみた

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

【WordPress】投稿者が仲良くなれる管理画面にカスタマイズしてみた

この記事はWordPressを使用しており、複数人の投稿で成り立っています。 投稿の内容も十人十色となるわけで、 「ここのレイアウトこうしたい…」 「新しいレイ...

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

花粉症との戦い

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

進化したGoogle レンズ

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

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

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

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

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

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