Sự kiện cuộn nhanh hơn? - Nền "nhảy" sau khi cuộn

Question

Tôi gặp sự cố nhỏ. Tôi đang cố gắng làm điều gì đó giống như nền thị sai của nikebetterworld.com. Trong lần làm quen đầu tiên của tôi, tôi có một cái gì đó hoạt động, nhưng nó có thể hoạt động tốt hơn. Khi tôi cuộn, vị trí nền sẽ thay đổi. Vấn đề là nó thay đổi một vài phần nghìn giây sau khi cuộn, vì vậy tôi có thể xem cách nền "nhảy" sau khi cuộn.

mã:

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

Bất kỳ lời đề nghị? Cảm ơn.

Sửa

Nhìn vào ví dụ này: http://jsfiddle.net/MZGHq/ (Cuộn xuống cho đến khi bạn nhìn thấy hình nền)

Answer 1

Điều quan trọng là sử dụng nền cố định nếu bạn phải làm mịn. Xem http://jsfiddle.net/MZGHq/7/

Tài liệu tham khảo:

Trang này dường như có một lời giải thích tốt về cách thức hiệu ứng thị sai dọc hoạt động: http://www.webdesignshock.com/one-page-website/

Ngoài ra hãy xem một trong này (họ không sử dụng nền cố định .. .note làm thế nào nó có vẻ hơi giống như của bạn): http://www.franckmaurin.com/the-parallax-effects-with-jquery/

Answer 2

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

Tôi tin rằng vấn đề là 0,5. Khi bạn tính toán vị trí mới, có đủ sự khác biệt giữa vị trí trước đó và vị trí mới cho nó là một sự thay đổi dễ nhận biết.

Thay đổi 0,5-0,2 hoặc thấp hơn nhằm làm giảm tối này một chút, tuy nhiên hiệu ứng thị sai là ít rõ rệt - đó không phải là những gì bạn muốn.

tôi sẽ cố gắng một cách tiếp cận khác nhau - mất một peek tại GitHubs trang 404 là một ví dụ: https://github.com/ddflsdigjh;ad

Answer 3

1. sử dụng 'cố định' nền
2. sự dịch chuyển vị trí nền nên lớn hơn nhiều so với cuộn (không 0,5 nhưng 0,01) dường như vấn đề chỉ diễn ra trong FF. Đây là trình duyệt chậm nhất trong các trang hiển thị lại và javascript.