より速いスクロールイベントですか？ - スクロールバックグラウンド "ジャンプ"

Question

私は小さな問題があります。 私はnikebetterworld.comの視差の背景のようなことをしようとしています。 私の最初の試合では、うまくいくものを手に入れましたが、うまくいくかもしれません。 スクロールすると、背景の位置が変わります。問題はスクロールしてから数ミリ秒後に変化するため、スクロール後にバックグラウンドがどのように「ジャンプ」するかを見ることができます。

コード：

var $w = $(window); 
function move($c) { 
    var scroll = $w.scrollTop(); 
    var diff = $c.offset().top - scroll; 
    var pos = '50% ' + (-diff)*0.5 + 'px'; 
    $c.css({'backgroundPosition':pos}); 
} 
$w.bind('scroll', function(e){ 
    move(some_container); 
}); 

任意の提案ですか？おかげさまで

編集この例で

ルック：http://jsfiddle.net/MZGHq/ （あなたは背景画像が表示されるまでスクロールダウン）

Answer 1

キーは、固定された背景を使用することです。

このページでは、垂直視差効果がどのように動作するかの良い説明を持っているようだ：http://jsfiddle.net/MZGHq/7/

参考資料を参照してくださいhttp://www.webdesignshock.com/one-page-website/

をまた、彼らは、固定された背景を使用していない（これを見てみましょう。..あなたのように少しジャンプするように見える）： http://www.franckmaurin.com/the-parallax-effects-with-jquery/

Answer 2

var pos = '50% ' + (-diff)*0.5 + 'px'; 

私は問題は0.5であると信じています。あなたが新しい位置を計算するとき、それが知覚可能なシフトであるためには、前の位置と新しい位置の間に十分な差があります。

変更0.50.2以下に最小化このビット、しかしパララックス効果はそれほど顕著ではない - あなたが望むものではないとします。

私は別のアプローチをしようとするだろう - 一例としてGitHubs 404ページでのぞき見を取る：「固定」 https://github.com/ddflsdigjh;ad

Answer 3

1. 使用を背景
2. は、バックグラウンド位置のずれは、（スクロールよりはるかに大きくする必要があります0.5ではなく0.01） 問題はFFだけで起こったようです。これは、ページとjavascriptを再レンダリングする最も遅いブラウザです。あなたはそれがスムーズに持っている必要がある場合