Пользовательские проблемы с прокруткой параллакса

Question

У меня есть специальная секция прокрутки параллакса на сайте. В разных местах есть пузыри речи, и все они прокручиваются с разной скоростью.

http://goo.gl/jZhVrJ (вы найдете речь пузыри на полпути вниз страницы)

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

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

Общая концепция заключается в том, что я позиционировал каждый из пузырьков речи. Затем, когда пользователь прокручивает код, изменяется свойство «top» для каждого пузыря. Если пользователь прокручивается вниз, он уменьшает «верхнее» значение. Если они прокручиваются вверх, это увеличивает «верхнее» значение. Каждый пузырь - это другая лупа, поэтому пузырьки движутся с разной скоростью.

Это также использует плагин «inview», поэтому прокрутка происходит только тогда, когда пользователь имеет этот блок.

Вот код JS делает параллакс скроллинга:

var $window = $(window); 
var windowHeight = $window.height(); 
var $quoteBG = $('.philosophy'); 
var quote1 = $("#quote1"); 
var quote2 = $("#quote2"); 
var quote3 = $("#quote3"); 
var quote4 = $("#quote4"); 
var quote5 = $("#quote5"); 
var quote6 = $("#quote6"); 
var quote7 = $("#quote7"); 
var quote8 = $("#quote8"); 
var quote9 = $("#quote9"); 

var scrolldirection = '-'; 
var lastScrollTop = 0; 
var modifier = '-'; 
$(window).scroll(function(event){ 
    var st = $(this).scrollTop(); 
    if (st > lastScrollTop){ 
     scrolldirection = 'down'; 
    } else { 
     scrolldirection = 'up'; 
    } 
    lastScrollTop = st; 
}); 

//function to be called whenever the window is scrolled or resized 
function Move(){ 

    //if the second section is in view... 
    if($quoteBG.hasClass("inview")){ 

     if (scrolldirection == 'down') { 
      modifier = '-'; 
     } else { 
      modifier = '+'; 
     } 

     quote1.css('top', modifier+'=2'); 
     quote2.css('top', modifier+'=1'); 
     quote3.css('top', modifier+'=3'); 
     quote4.css('top', modifier+'=2.1'); 
     quote5.css('top', modifier+'=2.5'); 
     quote6.css('top', modifier+'=3'); 
     quote7.css('top', modifier+'=2'); 
     quote8.css('top', modifier+'=1.5'); 
     quote9.css('top', modifier+'=3'); 

    } 
} 

$window.resize(function(){ //if the user resizes the window... 
    Move(); //move the background images in relation to the movement of the scrollbar 
});   

$window.bind('scroll', function(){ //when the user is scrolling... 
    Move(); //move the background images in relation to the movement of the scrollbar 
}); 

Answer 1

мне пришлось добавить следующий код в скрипку, чтобы получить его работу:

$quoteBG.on('inview', function (evt, isInView) { 
    if (isInView) { 
     $quoteBG.addClass("inview"); 
    } 
    else { 
     $quoteBG.removeClass("inview"); 
    } 
}); 

Фиксированный версия здесь: http://jsfiddle.net/up15ns6t/2/

После игры с ним я вижу пару вопросов.

Первый вопрос - это то, что я подозревал с самого начала: ваши расчеты по местоположению выполняются путем добавления или вычитания фиксированной суммы каждый раз при возникновении события прокрутки. Проблема заключается в том, что вы делаете такую ​​же настройку независимо от того, насколько далеко прокручивалось окно. Например, вы корректируете первую цитату на 2 пикселя, когда окно прокручивает 1 пиксель между событиями и когда оно прокручивает 100 пикселей между событиями. Это делает результаты недетерминированными.

Если бы я делал это, я попытался бы найти детерминированный алгоритм, который вычисляет положение каждой цитаты на основе положения прокрутки окна. В качестве альтернативы вы можете попробовать использовать свой подход «добавить/вычесть», но включите в свои расчеты сумму, которую прокручивало окно с момента последнего события.

Другая вещь, которую я заметил при игре с ней, заключается в том, что позиция не обновляется, когда родительский div (.philosophy) спрятан. Поэтому, если вы продолжаете прокручивать его и выходить из поля зрения, котировки постепенно подкрадываются. Такое поведение вызвано этой строки кода:

if($quoteBG.hasClass("inview")){ 

Вы должны были бы включать «или ранее в виду» дело в этой логике.

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

Update 1
Я создал простой детерминированный алгоритм в своей скрипке и применил его к одной цитате DIV, чтобы держать вещи от получения слишком запутанным. Она сначала вычисляет количество фона DIV, который виден:

var windowHeight = $window.height(); 
var backgroundTop = Math.round($quoteBG.offset().top); 
var st = $window.scrollTop(); 
var visibleHeight = (windowHeight + st) - backgroundTop; 

Значение visibleHeight будет отрицательным, если фон DIV находится ниже нижней части окна просмотра. Как только это станет положительным, я рассчитываю новую позицию для цитаты div на основе этого.

На странице загрузки, я записал начальное положение котировки DIV и определен коэффициент движения для него:

var motion1 = 0.5; 
var baseTop1 = $quote1.position().top; 

При прокрутке, я использовать их в сочетании с visibleHeight, чтобы вычислить положение для цитаты:

var position1 = baseTop1 + Math.round(visibleHeight * motion1) 

Таким образом, в этом примере, цитата прокручивается вниз на половину скорости фона (из-за motion1 = 0.5).

Обновленный скрипку здесь: http://jsfiddle.net/up15ns6t/5/

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