ブラウザをスクロールすると、追随して同じ位置に移動してくる画像やメニューボックスなどを見かけることがある。
あれはどうやっているのだろう？
少し試してみた。
たとえば、こんな感じ。→
画像#1表示
これは次のようにして実現できる。
<html>
<head>
<script type="text/javascript">
<!--
function repositionObject()
{
document.getElementById('float_img').style.top
= (document.body.scrollTop || document.documentElement.scrollTop) + 'px';
}
// -->
</script>
</head>
<body onScroll="setTimeout('repositionObject()', 200);">
<img id="float_img" src="img/test.jpg" style="position: absolute; top: 0px;" />
</body>
</html>
つまり、ウィンドウがスクロールされるたびにタイマーを使って少し時間をおいて画像の位置を設定し直すことで、追いかけてくる感じにするのだ。
しかし、これだと一瞬で移動してしまい、なんとも味気ない。
なめらかな動きをさせるにはもう少し工夫が必要だ。→
画像#2表示
これは、以下のようにしている。
<html>
<head>
<script type="text/javascript">
<!--
function repositionObject()
{
var top
= eval(document.getElementById('float_img').style.top.replace('px', ''));
var scrollTop
= (document.body.scrollTop || document.documentElement.scrollTop);
var d;
if (top > scrollTop) {
if (top - scrollTop > 1024) {
d = 512;
} else if (top - scrollTop > 512) {
d = 256;
} else if (top - scrollTop > 256) {
d = 128;
} else if (top - scrollTop > 128) {
d = 64;
} else if (top - scrollTop > 64) {
d = 32;
} else if (top - scrollTop > 32) {
d = 16;
} else if (top - scrollTop > 16) {
d = 8;
} else {
if (top - scrollTop < 4) {
d = top - scrollTop;
} else {
d = 4;
}
}
document.getElementById('float_img').style.top = (top - d) + 'px';
setTimeout('repositionObject()', 100);
} else if (top < scrollTop) {
if (scrollTop - top > 1024) {
d = 512;
} else if (scrollTop - top > 512) {
d = 256;
} else if (scrollTop - top > 256) {
d = 128;
} else if (scrollTop - top > 128) {
d = 64;
} else if (scrollTop - top > 64) {
d = 32;
} else if (scrollTop - top > 32) {
d = 16;
} else if (scrollTop - top > 16) {
d = 8;
} else {
if (scrollTop - top < 4) {
d = scrollTop - top;
} else {
d = 4;
}
}
document.getElementById('float_img').style.top = (top + d) + 'px';
setTimeout('repositionObject()', 100);
}
}
// -->
</script>
</head>
<body onScroll="setTimeout('repositionObject()', 300);">
<img id="float_img" src="img/test.jpg" style="position: absolute; top: 0px;" />
</body>
</html>
画面のスクロールをトリガとして画像の位置を再設定するのは最初の例と同じだが、今回は少しずつ移動させている。
その際、最初は大きめに移動し、だんだん移動距離を小さくさせることでソフトランディングする感じにしている。
位置補正の繰り返し実行は、イベントハンドラ関数 repositionObject の中で自分自身に対してタイマを設定し直すことにより行っている。
なお、ブラウザをスクロールさせた時の Scroll イベントはいくつも発生するので、body タグの onScroll で設定するタイマの時間間隔を大きめにとり、動きがぎこちなくなるのを防いでいる。
【2009年3月18日追記】
こういうメニューを「エレベーターメニュー」と言うらしい。
これを実現する JavaScript ファイルがいくつか提供されているらしく、以下のページで紹介されている。
『スクロールと同時にメニューがついてくる「エレベーターメニュー」』
http://imaginationdesign.jp/20080412/
posted by Ｋ/Ｉ at 06:11
| 東京 ☀
|
Comment(0)
|
TrackBack(0)
|
技術メモ
|
|
