Parallax Background

Автор: silence
Ссылка на официальном форуме:

HTML:

http://xenforo.com/community/resources/parallax-background.2566/

Демо:

HTML:

https://XenoGamers.org/

Очень простой способ придать Вашему сайту Parallax эффект.

Просто вставьте данный код:

Код:

/* 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');
}

Там, где JS включён. (Автор добавил данный код в шаблон 'page_container_js_body' перед '</script>')

Данный скрипт работает только в том случае, если у Вас задний фон установлен в 'HTML' и в 'Прочее' есть данный код:

HTML:

background-attachment: fixed;

 

Извините, чёт я не очень понял, про что это и что такое Parallax эффект?
В wiki не лез

 

яркий пример сайт танков.

 

Ой, а я не знаю. Можно пример и объяснить, в чём прикол

 

Задний фон сдвигается не одновременно с центром.

 

во блин, это как? дайте в личку урл примера

 

в первом сообщении есть ссылка на демо

 

Фон остается на месте, двигается только контент, тоесть сам форум. Фон остается на месте.

 

@avasil89 Вы ошибаетесь. Просто с демо сайта убран этот скрипт.

 

Фон тоже движется только на 50% медленее.