jQueryで奥行きのある背景スクロールを作ってみる
Posted: 2011.05.13 / Category: javascript / Tag: jQuery
普通に背景画像を指定するだけだとスクロールに追従して画像も移動しますが、jQueryで背景位置を調節することでスクロールの速度をずらすことができます。
この記事ではこの機能を利用して、スクロールすると奥行きの感じられる動作を作ってみます。
Sponsored Link
画像を手前は早く、奥は遅く移動
デモを見て頂ければわかると思いますが、やってることは手前の背景画像を早く動かし、奥の画像を遅く動かしているだけです。
html + css
画像は当然ですが2枚以上用意しましょう。
ここでは3枚画像の画像を使用します。
なのでdivを3つ用意し、それぞれに背景画像を指定します。
html
<div id="bg03"> <div id="bg02"> <div id="bg01"> <!-- /#bg01 --></div> <!-- /#bg02 --></div> <!-- /#bg03 --></div>
css
#bg01 { background: url(bg1.png); height: 3000px; } #bg02 { background: url(bg2.png); } #bg03 { background: url(bg3.png); }
画面以上にコンテンツがないとスクロールバーが表示されませんので、仮にheightを設定しておきました。
jQuery
「$(window).scroll」がスクロールしたときに実行されるイベントなので、この中に処理を記述します。
javascript
$(function() { $(window).scroll(function(){ var y = $(this).scrollTop(); $('#bg01').css('background-position', '0 ' + parseInt( -y / 5 ) + 'px'); $('#bg02').css('background-position', '0 ' + parseInt( -y / 50 ) + 'px'); $('#bg03').css('background-position', '0 ' + parseInt( -y / 200 ) + 'px'); }); });
「scrollTop」でスクロールの位置を取得できますので、この値をそれぞれの「background-position」に入れます。
値をそのまま入れるだけだと、全て同じ速度で移動しますので、それぞれ別の値で割ったりすれば良いんですね。
COMMENTS
RIRI 2014-08-17 23:08
初めまして、いつも参考にさせていただいている者です。
質問があるのですが、この背景スクロールを横スクロールサイトで動かしたいのですが、javascriptはどう書き換えたらよいでしょうか?
もしよろしければ、教えていただけると大変助かります。
webOpixel 2014-08-22 14:35
サンプルだと「background-position」のy軸を動かしているので、これをx軸に入れたら動きそうです。