Daha hızlı kaydırma etkinliği? -

Question

'u kaydettikten sonra arka plan "atlar" Küçük bir sorunum var. nikebetterworld.com'un paralaks arka planı gibi bir şey yapmaya çalışıyorum. İlk çalışmamda işe yarayan bir şey buldum ama daha iyi çalışabilir. Kaydırdığımda, arka plan konumu değişir. Sorun, kaydırma işleminden birkaç milisaniye değişmesidir, böylece arka planın kaydırma işleminden sonra "atlayabildiğini" görebiliyorum.

kodu:

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); 
}); 

herhangi bir öneriniz? Teşekkürler. Bu örneğe

Düzenleme

Görünüş: http://jsfiddle.net/MZGHq/ (arka plan resmini görene kadar aşağı kaydırın)

Answer 1

Anahtarın düzgün olması gerekiyorsa, anahtar sabit bir arka plan kullanmaktır. http://jsfiddle.net/MZGHq/7/

Referanslar bakınız:

Bu sayfa dikey paralaks etkisi nasıl çalıştığını iyi bir açıklama var gibi gözüküyor: http://www.webdesignshock.com/one-page-website/

Ayrıca bu bir bakmak (onlar sabit bir arka plan kullanmayın .. .Note sizinki gibi biraz ürkütücü gibi görünüyor): http://www.franckmaurin.com/the-parallax-effects-with-jquery/

Answer 2

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

Sorunun 0.5 olduğuna inanıyoruz. Yeni pozisyonu hesaplarken, algılanabilir bir kayma olması için önceki ve yeni konum arasında yeterli fark vardır.

0,2 veya daha düşük en aza indirir bu biraz için 0.5 değiştirme Ancak paralaks etkisi daha az belirgindir - istediğini olmadığı.

Ben farklı bir yaklaşım denemek istiyorum - örnek olarak GitHubs de 404 sayfa bir göz atın: https://github.com/ddflsdigjh;ad

Answer 3

1. kullanımı 'sabit' arka plan
2. arka plan pozisyonunun yer değiştirme kaydırma çok daha büyük olmalıdır (0,5 değil 0,01) problemin sadece FF'de gerçekleştiği görülüyordu. Bu, sayfaları ve javascript'i yeniden yayınlamadaki en yavaş tarayıcıdır.