パララックスの基本 scrollの座標位置を取得する

以前に同僚の引き継ぎで(長期休暇で海外旅行に行ってしまった)もって無理矢理パララックスやったときのまとめです。どんなにパララックスがしょぼかろうがなんだろうが、必ず以下、スクロール量を取得するコードが必要。jQueryを使ってやるやり方になってしまうのですが以下のコードで取得します。[program]
$(function() {
$(window).scroll(function() {
var value = $(this).scrollTop();
$('#scroll_value').text(value);
});
});

[/program]htmlソース内にはIDを#scroll_valueでどっかに表示させておきます。その際スクロールに追従するようにしないとインジケーターとしての意味がなくなっちゃうのでご注意。[program]
#scroll_value {
background: #f00;
color: #fff;
position: fixed;
z-index: 1000000;
width: 100px;
padding-left: 30px;
border-radius: 5px 5px 5px 5px;
margin-left:10px;
}

[/program]とか適当にやっておく。

スクロールに従っていろんなエフェクトをするということなので、scrollメソッド内にすべてのアクションなりエフェクトなりを書き込むことになります。従って、[program]$(function() {
$(window).scroll(function() {
var value = $(this).scrollTop();
//$('#scroll_value').text(value);
//ここからいろいろ書く
});
});
[/program]という感じです。

具体的なパララックスはどうなのか?というとかなりいろんなものがあるので、なかなか具体例というのが面倒です。スクロールするごとにスクロールの速さと対象のオブジェクト(div要素など)の速さを微妙にずらしてゆくのが、どうやらパララックス臭い感じになって「ああ、やってるな的な感じになります。
ちなみにパララックスで効果を与えるオブジェクトはすべてCSSでAbsoluteかRelativeで設定しないと駄目です。