Nền cuộn chậm trong Javascript hoặc CSS?

Question

Tôi đang cố gắng tìm ra cách làm cho hình nền cuộn chậm hơn nội dung trang. Tôi đã không có một đầu mối như thế nào nó được thực hiện. Ví dụ hoàn hảo về những gì tôi đang cố gắng làm is here

Điều này có được thực hiện trong CSS hoặc jQuery/Javascript không?

Answer 1

này được thực hiện bằng javascript (jQuery):

(function() { 
    var a = document.body, 
     e = document.documentElement; 
    $(window).unbind("scroll").scroll(function() { 
     a.style.backgroundPosition = "0px " + -(Math.max(e.scrollTop, a.scrollTop)/8) + "px"; 
    }); 
})(); 

Answer 2

Tác động vào liên kết bạn được đăng được thực hiện trong Javascript sử dụng jQuery.

Nếu bạn kiểm tra mã của một kịch bản của trang web here, bạn có thể tìm thấy:

.style.backgroundPosition="0px "+-(Math.max(e.scrollTop,a.scrollTop)/8)+"px" 

Thực tế, tài sản background-position CSS được sửa đổi trên trang di chuyển tính trục Y tùy thuộc vào vị trí trang cuộn . Nếu bạn có một số kiến ​​thức về Javascript, jQuery hoặc Mootools, bạn có thể tái tạo hiệu ứng rất dễ dàng.

Tôi nghĩ rằng không thể làm điều đó bằng cách chỉ sử dụng CSS.

Answer 3

Cái này hoạt động cho hình ảnh bg cao.

(function() { 
     var body = document.body, 
       e = document.documentElement, 
       scrollPercent; 
     $(window).unbind("scroll").scroll(function() { 
      scrollPercent = 100 * $(window).scrollTop()/($(document).height() - $(window).height()); 
      body.style.backgroundPosition = "0px " + scrollPercent + "%"; 
     }); 
})();