Форум

ShutTap · #1 (**permalink**) 18.11.2014, 20:23

Здравствуйте.
Есть 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();
}

ShutTap · #2 (**permalink**) 19.11.2014, 16:49

Или это впринципе неадекватный способ, и нужно по какому-то другому принципу?

рони · #3 (**permalink**) 20.11.2014, 05:21

ShutTap,
для колеса мышки надо писать свою плавную прокрутку

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .first, html, body {
     height: 100%;
     margin: 0px
  }
  .first {
    background: rgb(140, 0, 86) url(http://www.sib-top.ru/images/photo/sunrize/09.jpg) no-repeat center;
    background-size:  cover;
  }

  .first:nth-child(2) {
    background: rgb(140, 0, 86) url(http://ii1.photocentra.ru/images/main42/424926_main.jpg) no-repeat center; background-size:  cover;
  }

  .first:nth-child(3) {
    background: rgb(140, 0, 86) url(http://aramgurum.ru/w/15/zakat_bereg_more_panorama_1680x1050.jpg) no-repeat center; background-size:  cover;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
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() { //прокручиваем
    var elems = document.querySelectorAll('.first');
    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()
}
$(function() {
    $(document).on('mousewheel', function(event) {
        var top = $(window).scrollTop() - (event.originalEvent.wheelDelta );
        event.preventDefault();
         $('html, body').stop().animate({
            scrollTop: top
        }, 800);
    })

})
  </script>
</head>

<body>



<div class='first'>
<span class='info orange'>Информация</span>
<div class='main'>
<span class='info_show show '>текст1</span>
</div>
</div>
<div class='first'>
<span class='info'>Информация2</span>
<div class='main'>
<span class='info_show '>текст2</span>
</div>
</div>
<div class='first'>
<span class='info'>Информация3</span>
<div class='main'>
<span class='info_show '>текст3</span>
</div>
</div>




</body>

</html>

ShutTap · #4 (**permalink**) 20.11.2014, 08:05

Без JQuery можно?
А так буду разбираться, не знал таких нюансов, большущее спасибо

P.S. Я наверное неточно описал проблему. Смещение фона при отключенной плавной прокрутке идет просто рывками, это нормально, т.к. смещение считается из разницы положения обьекта и прокрутки (так в ИЕ и ФФ, как должно быть по задумке).
А в Опере и Хроме дергается не в плане рывков, а в плане "дребезжания", если точнее... То есть, при прокрутке фон то там, то там, скачет быстро, и получается "дребезжание". И это не зависит от способа прокрутки, такое наблюдается и при прокрутке скроллбаром, и клавиатурой.

рони · #5 (**permalink**) 20.11.2014, 09:20

ShutTap,
можно
http://learn.javascript.ru/mousewheel
http://learn.javascript.ru/js-animation
http://learn.javascript.ru/metrics-window

ShutTap · #6 (**permalink**) 20.11.2014, 11:10

взял для начала пример ваш.
прокрутка плавная, да. так же, как если в браузере включить "плавная прокрутка".
но "дребезжание", описанное выше, все равно в указанных браузерах наблюдается...

рони · #7 (**permalink**) 20.11.2014, 13:43

Сообщение от ShutTap

прокрутки, такое наблюдается и при прокрутке скроллбаром, и клавиатурой.

здесь у вас это есть в 3 посте ?

ShutTap · #8 (**permalink**) 20.11.2014, 14:09

там есть, я имею в виду, что это код для того, чтобы прокрутка шла типа попиксельно плавно, а не по строкам рывками. у меня же рывки не от построчной прокрутки, а дребезжание. я ставил ваш код, и да, плавная прокрутка, но дребезжание остается. чем бы не прокручивалось, я это имел в виду

или что вы имеете в виду? в плане, что над анимацией работать надо? (пс ваш пример точно так же в Опере и Хроме дребезжит, или это у меня так только? в ИЕ и ФФ все ок)

рони · #9 (**permalink**) 20.11.2014, 14:28

ShutTap,
так и непонял пост 3 у вас с рывками или нет -- ненадо его никуда ставить - нажмите кнопку посмотреть и проверьте

ShutTap · #10 (**permalink**) 20.11.2014, 14:32

фон "дребезжит", но "плавная прокрутка" работает нормально

Сообщение от ShutTap

(пс ваш пример точно так же в Опере и Хроме дребезжит, или это у меня так только? в ИЕ и ФФ все ок)

Форум

Справочник

Discord чат

Курсы javascript