Рендеринг проблем с параллакс-эффектом - PullRequest
Новая
       13

Рендеринг проблем с параллакс-эффектом

2 голосов
/ 28 марта 2011

Я пытаюсь создать эффект параллакса, используя window.onscroll и scrollTop, но продолжаю сталкиваться с проблемой рендеринга, которая выглядит так, как будто я получаю прокрутку после рендеринга области просмотра. Как вы можете видеть из этого примера (код прилагается), движение ящиков нестабильно и прерывисто.

Поведение идентично во всех браузерах на основе WebKit и FireFox.

JavaScript 

$(document).ready(function() {
  $('.box').each(function() {
    $(this).data('y', $(this).offset().top);
  });
});

$(window).scroll(function() {
  var scroll = $(this).scrollTop();

  $('.box').each(function() {
    var parallax = $(this).data('parallax');

    if (parallax) {
      var y = $(this).data('y');
      var offset = (scroll - y) * parallax;

      $(this).css('-webkit-transform', 'translateY(' + offset + 'px)');
    }
  });
});

Разметка 

<div class="red box">Lorem ipsum dolor sit amet.</div>
<div class="green box" data-parallax="0.4">Consectetur adipiscing elit.</div>
<div class="blue box" data-parallax="0.3">Nam consectetur dolor.</div>

1 Ответ

2 голосов
/ 30 апреля 2012

Просто интересно, стоит ли использовать готовый, а не «изобретать» колесо?

http://joelb.me/scrollpath/

...