Parallax Background - Nền Parallax

[PVS]

Parallax Background - Nền Parallax

Đơn giản chỉ cần đặt đoạn code sau:

/* Firefox super responsive scroll (c) Keith Clark - MIT Licensed */
(function(e){var t=e.documentElement;if("MozAppearance"in t.style){var n=t.clientWidth;t.style.overflow="scroll";n-=t.clientWidth;t.style.overflow="";var r=e.createEvent("UIEvent");r.initEvent("scroll",true,true);function i(){e.dispatchEvent(r)}e.addEventListener("mousedown",function(r){if(r.clientX>t.clientWidth-n){e.addEventListener("mousemove",i,false);e.addEventListener("mouseup",function(){e.removeEventListener("mouseup",arguments.callee,false);e.removeEventListener("mousemove",i,false)},false)}},false);e.addEventListener("DOMMouseScroll",function(e){if(!e.ctrlKey&&!e.shiftKey){t.scrollTop+=e.detail*16;i.call(this,e);e.preventDefault()}},false)}})(document);

$(window).scroll(function (e) {
  parallax();
});

function parallax() {
  var scrolled = $(window).scrollTop();
  $('#XenForo').css('background-position', '0px ' + -(scrolled * 0.2) + 'px');
}

Vào một nơi nào đó, nơi JS được kích hoạt! (Ví dụ sử dụng template 'page_container_js_body' và đặt nó ngay trước dòng '</script>').

Lưu ý: Điều này chỉ hoạt động nếu bạn đang sử dụng bộ chọn background trong XenForo's Style Properties và nếu trong 'Miscellaneous' ta có:

background-attachment: fixed;

​

Mặc dù tôi đã không được thử nghiệm với các chỉnh sửa khác, điều này sẽ chỉ nhắm đến mục tiêu background thiết lập trong HTML!

Xin lưu ý rằng trong một số trình duyệt, nó có thể gây di chuyển lag. Đây không phải là lỗi của tôi, nó chỉ đơn giản là trình duyệt hoặc thiết bị di động. Nó có thể không xảy ra nếu không có quá nhiều tài nguyên trên trang, hoặc nếu bạn đang sử dụng Chrome/IE10. Firefox bị này có quá nhiều yếu tố.

Chúc các bạn thành công.

Nguồn: xenforo.com​