6

JavaScriptを使用して視差効果のあるWebサイトを再作成しようとしています。つまり、スクロール中に異なる速度で移動する 2 つ以上のレイヤーがあることを意味します。

私の場合、1 つのレイヤーのみを移動し、もう 1 つのレイヤーは静的なままです。レイヤー 1 = ウェブサイトのテキスト。レイヤー 2 = 要素の背景。

このために、単純なソース コードを使用しています (jQuery 1.6.4 を使用):

var docwindow = $(window);

function newpos(pos, adjust, ratio){
   return ((pos - adjust) * ratio)  + "px";
}

function move(){
   var pos = docwindow.scrollTop();
   element.css({'top' : newpos(pos, 0, 0.5)});
}

$(window).scroll(function(){
   move();
});

問題: - すべての計算が正しく行われ、効果が期待どおりに「機能」します。ただし、一部のブラウザー (Chrome MAC/Windows、Opera MAC、IE、皮肉なことに Safari ではありません) ではパフォーマンスの不具合があります。

スクロール中に何が表示されますか? - スクロール中、背景はスクロールとともに一方向に移動しますが、時折数ピクセル前後にジャンプするようで、非常に不穏な効果 (流動的ではありません) が生じます。

私が試した解決策: - スクロール イベントを制限するタイマーを追加する - .css() メソッドの代わりに短い期間の .animate() メソッドを使用する。

また、.scrollTo メソッド (scrollTo jQuery プラグイン) を使用するとアニメーションがスムーズになることも確認しました。したがって、スクロールイベントの発生に問題があると思われます（速すぎます）。

同じ行動を観察しましたか？それを修正する方法を知っていますか？より良い解決策を投稿できますか?

すべての応答に感謝します

編集 #1: ここでは、jsfiddle のデモ (タイマー付き) を見つけることができます: http://jsfiddle.net/4h9Ye/1/

4

1 に答える 1

11

代わりに scrollTop() を使用し、背景位置をfixedに変更する必要があると思います。問題は、絶対に設定すると、上下にスクロールしたときにデフォルトで移動することです。

ちらつきが発生するのは、デフォルトのブラウザー スクロールの一部として位置が更新され、スクリプトの一部として再び更新されるためです。これにより、必要な位置だけでなく、両方の位置がレンダリングされます。固定の場合、背景は指定しない限り動きません。

http://jsfiddle.net/4h9Ye/2/でデモを作成しました。

于 2012-01-25T18:58:13.327 に答える