Эффект параллакса

У меня есть эффект параллакса на моем сайте, но при прокрутке он выглядит довольно нервным:

Вот код:

    jQuery(document).ready(function() {
      jQuery(window).scroll(function() {
        jQuery('*[class^="prlx"]').each(function(r) {
          var pos = $(this).offset().top;
          var scrolled = $(window).scrollTop();
          jQuery('*[class^="prlx"]').css('top', +(scrolled * 0.6) + 'px');
        });
      });
    });
*[class^="prlx"] {
  position: absolute;
  width: 100%;
  height: 300%;
  top: 0;
  left: 0;
  z-index: -1;
  background-size: 110%;
}
.prlx-2 {
  background-image: url('http://www.roscodigitalmedia.co.uk/rosco/wp-content/uploads/2015/12/bigstock-Artist-Photographer-Retouches-91840682.jpg');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container-fluid homeHeader">
  <div class="prlx-2">

  </div>
</div>

ОТВЕТЫ

Ответ 1

Я не вижу ничего плохого в вашем коде. Готов поспорить, что причиной является 2,1 МБ вашего изображения, размер которого изменяется от 2500 пикселей до ширины окна. Учтите, что браузер пытается "нарисовать" изображение и вычислить позицию для каждого значения прокрутки...
Я бы подошел к нему с фоновой позицией на css, но, несмотря на вашу проблему, проблема, похоже, сосредоточена на производительности. То, что вы делаете на JS, немного неэффективно, потому что сначала вы выбираете все теги '*[class^="prlx"]' через них, а затем снова применяете к ним все в каждом цикле перерасчет позиции, снова просматривая их. Когда вы перебираете элементы, вы можете использовать элемент this и применить к нему изменения. Сохранить $this для переменной - это просто не применять jQuery дважды к одному элементу и сохранять небольшие ресурсы, но в этом случае может быть не так важно.
Здесь, на моем ноутбуке, я не вижу его нервным. Попробуйте это и используйте меньшее изображение, чтобы узнать, улучшает ли он производительность.

    jQuery(document).ready(function() {
      jQuery(window).scroll(function() {
        jQuery('*[class^="prlx"]').each(function(r) {
          var $this = $(this);
          var pos = $this.offset().top;
          var scrolled = $(window).scrollTop();
          $this.css('top', +(scrolled * 0.6) + 'px');
        });
      });
    });
*[class^="prlx"] {
  position: absolute;
  width: 100%;
  height: 300%;
  top: 0;
  left: 0;
  z-index: -1;
  background-size: 110%;
}
.prlx-2 {
  background-image: url('http://www.roscodigitalmedia.co.uk/rosco/wp-content/uploads/2015/12/bigstock-Artist-Photographer-Retouches-91840682.jpg');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container-fluid homeHeader">
  <div class="prlx-2">

  </div>
</div>

Ответ 2

Я бы добавил will-change к вашим атрибутам CSS. Это помогает браузеру понять, как обрабатывать элементы. Он подготовит браузер для анимации, поэтому не будет "удивлен", что ему нужно изменить способ отображения элемента.

*[class^="prlx"] {
    ...
    will-change: top;
}

Во-вторых, вам следует поэкспериментировать с другими другими методами, кроме использования атрибута top. Попробуйте background-position, margin-top или transform: translate(0, Xpx). Надеюсь, что последний самый лучший.

Ответ 3

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

Bf6HH.jpg

Это делает неравномерную прокрутку почти на всех веб-страницах. Клавиши со стрелками имеют одинаковый эффект. Страница вверх и вниз по страницам очень напряженная. Вы можете попробовать найти мышь с гладкой прокруткой, но кроме этого, я не думаю, что есть решение.