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

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

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

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.

Спасибо Мэтт


javascript html jquery parallax jquery-effects
person Matthew Deloughry    schedule 26.02.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Немного устарело, но к вашему сведению...

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

this.each(function(index) {

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

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

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

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

person Jahmic    schedule 21.07.2012