Пользовательский parallax

Question

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

В настоящее время у меня есть:

var lastScrollTop = 0; 
var logoStartPos = $('.bg-logo').position().left; 
$(function(){ 
    $(window).scroll(function(){ 

     var st = $(this).scrollTop(); 
     if (st > lastScrollTop){ 
      if($('.bg-logo').is(':in-viewport')) 
      $('.bg-logo').css({'left':($('.bg-logo').position().left+10) + "px"}); 
     } else { 
      if($('.bg-logo').is(':in-viewport') && logoStartPos < $('.bg-logo').position().left) 
      $('.bg-logo').css({'left':($('.bg-logo').position().left-10) + "px"}); 
     } 
     lastScrollTop = st; 

    }); 
}); 

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

Любые советы или указатели для достижения результата Я после?

Рабочим пример моего кода на http://motoring.egl.me.uk

Благодаря Matt

Answer 1

Немного устаревшее, но FYI ...

В вашем JQuery инициализации или готовое событие, необходимо инициализировать каждый раздел , статью, элемент или что-то еще (item.each) для создания функции прокрутки, так что каждая из них имеет собственную функцию прокрутки.

this.each(function(index) { 

Затем в функции прокрутки обрабатывать событие, только если оно является «текущим». Вам нужно каким-то образом определить, какой элемент является «текущим». Часто это делается путем сохранения размера окна каждого элемента в глобальном массиве, а затем с использованием этого сравнения с текущим местоположением.

Что-то вроде: (так, как вы проектировали свой код, вероятно, будет очень отличаться)

// If this section is in view 
if (($window.scrollTop() + $window.height()) > (topOffset) && 
    ((topOffset + $self.height()) > $window.scrollTop())) 

Таким образом, когда один элемент выходит за пределы экрана, то следующий пункт должен стать «текущий» и продолжить прокрутки.