Показать сообщение отдельно
  #1 (permalink)  
Старый 18.11.2014, 20:23
Аспирант
Отправить личное сообщение для ShutTap Посмотреть профиль Найти все сообщения от ShutTap
 
Регистрация: 12.11.2012
Сообщений: 70

Плавное смещение фона
Здравствуйте.
Есть div-ы с именем full_screen, с картинкой в фоне. При прокрутке страницы фон у этих дивов смещается, то есть, создается эффект параллакса.
Всё работает. НО! Очень сильно дергаются, никакой плавности не наблюдается (в Опере и Хроме, в ИЕ и ФФ нормально).
В чем проблема, подскажите пожалуйста
Код:
var elems = document.getElementsByName("full_screen");

function getCoords(elem) { //получаем координаты объекта
    var box = elem.getBoundingClientRect();

    var body = document.body;
    var docElem = document.documentElement;

    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;

    var clientTop = docElem.clientTop || body.clientTop || 0;
    var clientLeft = docElem.clientLeft || body.clientLeft || 0;

    var top  = box.top +  scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;

    return { top: Math.round(top), left: Math.round(left) };
}

function bgscroll() { //прокручиваем

pageY = window.pageYOffset || document.documentElement.scrollTop;
clientY = document.documentElement.clientHeight || document.body.clientHeight;

for (i=0; i<elems.length; i++){

elemTop = getCoords(elems[i]).top;

   if (elemTop < pageY+clientY && pageY < elemTop+elems[i].offsetHeight) { // если картинка показалась на экране верхним или нижним краем
      elems[i].style.backgroundPosition = "center " + Math.floor((pageY-elemTop)*0.6)+"px"; // делаем смещение её фона равным разнице между ее расположением относительно начала документа и прокруткой, умноженное на коэффицент (который и создает эффект паралакса)
    }
}
 
}

window.onscroll = function(){
bgscroll();
}
Ответить с цитированием