背景イメージを遠近感トリックでスクロールする方法 （Parallax Backgrounds）

Webコンテンツをスクロールすると、背景イメージとして指定した画像がそれぞれ異なる速度で移動する。背景画像のスクロール速度が、前後で異なることで奥行きを再現することが出来る。テレビのアニメなどで利用される遠近感のトリックに近い。

コンテンツの背景と、もう１つの背景（以下：レイヤー）を用意する。レイヤーに使用する背景画像は、GIFやPNGで部分的に透明にしておく必要がある。コンテンツの背景もスクロールするので、パターンイメージの方が良いだろう。

スクロール速度の異なる背景

サンプルでは、背景のパターンと、雲のレイヤーが異なる速度でスクロールする。

コンテンツスクロールに連動して、JavaScriptで背景のposition属性を動的に変更することでアニメーション処理を実装している。導入するには、サンプルページのCSSとJavaScriptコードを参考にすればよい。コードをそのままコピーしても利用できるが、多少のJavaScriptの知識は必要。

背景のイメージを変更するには、CSS記述内のファイル指定のみを変更すればよい。また、スクロールの速度を遅くするには、JavaScriptコードの calcParallax(400.. の数値を変更することで可能になっている。シンプルだが少し変わったトリックなので、是非試していただきたい。