パララックス効果（視差効果）の導入。「jarallax」がFirefoxでbackgroundPositionYが動作しない解決策。 14.01.06  （更新: 20.09.29）

最近、ホームページにパララックス効果（視差効果）を取り入れたサイトが増えてきています。
当サイトのTOPページでも取り入れてみました。
http://www.webase.jp/

その他、参考サイト。

• http://shop.nikon-image.com/nikon1/nikon1aw1/
• http://hiromisekiguchi.com/
• http://graphicnovel-hybrid4.peugeot.com/start.html
• https://getgoldee.com/
• http://disneydigitalbooks.go.com/tron/

パララックス効果はユーザーにインパクトを与え、印象づけることができます。また、何回もスクロールして繰り返し見てもらえる、滞在率を高める効果も期待できるためコンテンツの内容自体も印象づけることができます。
しかし、パララックス効果をTOPページ先頭部分で長いステップで見せる場合、リピート率の高い趣向のサイトではユーザビリティを考慮すると導入には検討が必要です。
スキップボタンを分かりやすい箇所に配置したり2回目以降のアクセスではパララックス効果のスキップして表示しないなどの工夫が必要でしょう。
あまり長いページやパララックス効果を多用するとページの読み込みに時間がかかったりスマートフォンなどのCPUパワーの非力な端末ではうまく動作しなかったり画面の縦横比の関係で見えてはいけない部分が表示されていたりしないか注意が必要です。
読み込みに時間がかかる場合はLoading処理を入れるといいでしょう。

「jarallax」でFirefoxでbackgroundPositionYが動作しない。

今回、当サイトのTOPページに導入したパララックスは「jarallax」（http://www.jarallax.com/）を使ってみました。

こちらは大変導入しやすく、パララックス効果を使いたいオブジェクトは「position」指定にしてとりあえず普通にコーディングしていき、「jarallax.js」と「jquery.js」を読み込みパララックス効果を設定するオブジェクトのクラスにアニメーション（CSSで設定）していくだけです。
実装方法は下記
http://liginc.co.jp/web/js/jquery/24446
をご覧ください。

ここで困ったのがパララックス効果で「backgroundPositionY」がFirefoxで効かないこと。

↓こんな感じでアニメーションを指定しています。

「backgroundPositionX」、「backgroundPositionY」はIEの独自実装なのでIEしか効かないのかと思ったら、Safari、Chromeでもしっかり動作するがFirefoxだけ動作しない。
試しに「backgroundPosition:'0 50px'」としても動作しない。（「backgroundPosition:'50px 0'」ならX軸方向には動作するが・・）
デモ「http://www.jarallax.com/demo3/」でも動作していないのでFirefoxの「backgroundPositionY」は動作しないようです。

解決策

下記のjQueryを使えばFirefoxでも「backgroundPositionX」、「backgroundPositionY」が動作するようになります。

https://github.com/louisremi/jquery.backgroundXY.js/blob/master/jquery.backgroundXY.js