Прокрутка вертикального параллакса - PullRequest
Новая
       17

Прокрутка вертикального параллакса

5 голосов
/ 26 июля 2011

Я работаю над упрощенным вертикальным параллаксом (аналогично http://nikebetterworld.com).

У меня есть быстрое демо, работающее - код технически работает, но я испытываю нервный эффект при перерисовке после каждой прокрутки - кажется, что JavaScript происходит поздно. Есть идеи почему? Я не вижу ничего в сценарии, который действительно выделяется. 

var getYPosition = function() {
  if (typeof(window.pageYOffset) == 'number') {
    return window.pageYOffset;
  } else {
    return document.documentElement.scrollTop;
  }     
};

$(document).ready(function(){
  var sections = $(".section");
  $(window).scroll(function() {
    var x = getYPosition(),
    y = Math.floor(x / 1600),
    z = $(sections[y]).offset();
    $(sections[y]).css("background-position", "0 " + (getYPosition() - z.top)/2 + "px");
  });
});

Ответы [ 2 ]

5 голосов
/ 26 июля 2011

Похоже, изображения перемещаются дважды - сначала прокруткой браузера, а затем обработчиком scroll(). Отсюда и дрожание.

Вы можете получить более чистый эффект, используя position:fixed или background-attachment:fixed для изображений - таким образом, они не зависят от прокрутки браузера, но будут перемещаться обработчиком scroll(). У вас больше не будет одного эффекта, сражающегося с другим. Вам придется соответственно изменить ваш обработчик scroll().

3 голосов
/ 26 июля 2011

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

http://ejohn.org/blog/learning-from-twitter/

var outerPane = $details.find(".details-pane-outer"),
    didScroll = false;

$(window).scroll(function() {
    didScroll = true;
});

setInterval(function() {
    if ( didScroll ) {
        didScroll = false;
        // Check your page position and then
        // Load in more results
    }
}, 250); //in miliseconds
...