background-attachmentを使ったパララックス風サイトの作成

パララックスとは視差の効果を用いて、サイトに動きをつける事です。多くの場合はスクロールする際に複数の要素に異なるスピードにスクロールするように設定する事で視差が生じ、結果としてレイヤー構造を意識出来る重層的なデザインになります。

今回はcss3の「background-attachment」を使用してcssのみでパララックス風のページを作成してみましょう。

background-attachmentとはスクロールした時に、背景画像が一緒に動くか、固定するかを指定します。

background-attachment-scroll（初期値）
背景画像を固定せず、画面に合わせてスクロールする。

background-attachment-fixed
背景画像を固定します。画面がスクロールしても、背景画像はスクロールしない。

背景画像用のdivとコンテンツ情報が入るdivを交互に配置する事で下記のようなサイトが作成出来ます。