use_jquery_and_css_parallax

jQueryとCSSを使って、背景固定の簡易パララックスを作る

背景の起点が下図のようにウィンドウの一番上から始まっている場合は、
background-attachment: fixed; を入れれば簡易なパララックスができます。

ウィンドウの先頭が背景パララックスの起点のときの図

では、下図の場合はどうなるでしょう?

上にメニューがある場合の図

写真の上にサイトのヘッダーがあります。
この場合、

background-position: center top;
background-attachment: fixed;

を入れるとこうなります。

background-attachment: fixed; をいれてみると、写真がずれてしまいました

ちょっと写真が上にずれてしまっているのがわかるでしょうか?
background-attachment: fixed;の基準点は、指定した要素からの値ではなく、ブラウザの表示領域に対しての値となるので、上の図のように

background-position: center top;

を指定すると、ウィンドウの上付き中央に表示されることになります。

ということは、もしヘッダーなどが上についているときにパララックスをしたい!となったとき、
単純にbackground-attachment: fixed;を指定すればよい、ということではなくなります。
ヘッダー分の高さをもたせた画像を作ればできますが、個人的に余計な余白をつけた画像は作りたくないのと、
レスポンシブで別途画像が必要
という二度手間があるので、その手段は取りません。

固定背景の上に何かの要素がくるときはJSを使おう

CSSだけでできれば理想ですが、ちょっとむずかしそう。ということで、JSを書きました。

ヘッダーの直後要素に.js-animationをつけます。
その際、その直後要素には「background-attachment: fixed;」を指定しないのがポイントです。

それ以降の要素には、必要であればbackground-attachment: fixed;を指定してください。
これでいい感じに簡単なパララックスができます!

copyright © mellowchanter.info All Rights Reserved.