ParallaxScrollを作りました

HTML5 Webデザイン CSS jQuery ParallaxScroll

最近、Parallax Effect(視差効果)を取り入れたサイトを一つ作ることになりまして、その際に、jQueryを利用したスクリプトを一つ書いたのでご紹介しようと思います。

Parallax Effect(視差効果)とは

詳しくは調べていただくとして、Parallax Effectを取り入れたサイトというのは、簡単に言うとスクロールに応じて、画像をそれぞれ異なる速度で動かし奥行きを表現したサイトのことです。最近じわじわとこのデザインのサイトが増えている気がします。

今回は、このParallax Effectを簡単に導入出来るようなスクリプトを書いてみました。

ParallaxScroll

ダウンロード

https://docs.google.com/file/d/0B3uynBoD8c8fQmhzcmNTUFkyLWc/edit?usp=sharing*1

ParallaxScrollの概要

このスクリプトが行っていること自体は簡単で、ページを最下部までスクロールした際に、画像の最下部がサイトの最下部と合うように動かしているというだけです。
つまり、読み込む画像の縦サイズでスクロールに応じた画像の移動速度を変えることができるということです。

速く移動させたいのであれば、縦サイズの長い画像を用意し、ゆっくりと移動させたい場合は、縦サイズの短い画像を用意すれば良いということです。
注意すべき点は、ページ自体の縦サイズより短い画像を用意すると、スクロールしても画像が動かない点です。

ParallaxScroll.jsとParallaxScroll_img.jsの違い

この二つの違いは、動かす画像を

  • 入れ子にしたdivのbackground-imageで指定しているのがParallaxScroll.js
  • div#bgset内に記述したimgタグで指定してるのがParallaxScroll_img.js

となっています。

ParallaxScroll.jsの場合
div#layer1 {
	background: url(../image/layer1.png) 50% 0 no-repeat fixed;
}
div#layer2 {
	background: url(../image/layer2.png) 50% 0 no-repeat fixed;
}
div#layer3 {
	background: url(../image/layer3.png) 50% 0 no-repeat fixed;
}

というような感じになります。

ParallaxScroll_img.jsの場合
#bgset {
	position: relative;
}
img.parallax {
	position: fixed;
	width: 100%;
}

というような感じになります。

まとめ

とりあえずサンプルのhtml、cssを見てもらうのが一番だと思います。

*1:ファイル->ダウンロードとしていただければ、ダウンロードされます