たった数行でパララックス効果を演出する方法【jQuery】

2012年7月22日 jQuery NAndo

パララックスとは?

ちまたで流行と噂のParallax(パララックス)。
スクロールすると背景や画像などが時間差で移動することで、視差効果による奥行き感が表現できます。

スクロールすることで効果が現れるため、ページが長くなりやすいランディングページと結構相性が良いんじゃないかな、と考えています。

で、結構複雑なコーディングしてんじゃないの?と思ってしまうわけだが、案外シンプルに実現できてしまうんですね。
(と言っても大手企業さんとかがやってるようなのは、やっぱ複雑なもんだったりするんだけど)

ここでは、比較的かんたんにパララックス効果を演出できる一番シンプルなコードを紹介します。

パララックスのデモページ

デモ

パララックスのサンプルコード

これだけで、パララックス効果が発動します。