すたらブログ

文系Webプログラマの備忘録

パララックス用JavaScriptプラグインを使う場合はマウスホイールに注意

JavaScript

目次

ページに奥行きがあるかのように感じさせる、いわゆる視差効果をページ内で使いたくて、プラグインをあれこれ試しました。
結果、どのプラグインでも、マウスホイールによるスクロールに限り、対象要素がぴょこぴょこ上下に揺れ動いたりチラついたりする場合があることが分かりました。

Parallax.js

利点

  • マウスホイールによるスクロールに限れば、最も動作が安定している。
  • 利用方法が簡単。

欠点

  • モバイルでは動作しない。
    視差効果は生まれず、他の部分と同じようにスクロールする。
  • jQuery3.0では動作しない。(v1.4.2)
  • IEやEdgeでのマウスホイールによるスクロールの際に対象要素がチラつくのを防ぐため、<html>, <body>はposition: staticでなければならない。
    (しかし、これによる不利益は少ないと思われる)

ScrollMagic

利点

  • 視差効果のほかにも様々な動きを実現できる。
  • モバイルでも動作する。

欠点

  • 利用方法が複雑で難しい。
  • IEやEdgeだけでなくChromeでも、マウスホイールによるスクロールの際に対象要素がぴょこぴょこ上下に揺れ動く。
    解決方法もない。

SuperScrollorama

利点、欠点は上のScrollMagicと同じです。
ScrollMagicの前のプロジェクトである、このプラグインではどうだろうかと思って試してみましたが、結果は同じでした。

まとめ

他のプラグインも試してみましたが、IEでチラつく場合が多かったです。
ここでは詳しくは取り上げません。

視差効果を利用したいならParallax.jsが最適だと思います。
<html>, <body>をposition: staticにさえすれば、他はなんの問題もなく滑らかにスクロールできるんですから。
ScrollMagicは多彩な動きを実現できるので腰を据えて勉強する価値があると思いますが、視差効果だけはやめておいたほうがいいでしょう。

そもそも、スクロールバーやタッチパッドによるスクロールならば、どのプラグインも問題ありません。
マウスホイールというものがこれほど厄介なものだとは…。疲れ果てました。