Движение по горизонтали по вертикальной спирали Stellar JS

Question

У меня возникают трудности с моим эффектом горизонтального смещения. Я хочу использовать только Stellar JS для горизонтального сдвига img на вертикальном прокрутке. На данный момент у меня есть контейнерный элемент высотой 1800px и img, высота которого & ширина динамически устанавливается при загрузке (на основе видового экрана ... т.е. высота является высотой окна просмотра, а ширина пропорционально шире, чем в окне просмотра).

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

Вот пример, созданный творцом Stellar JS, который близок к тому, что (но с некоторыми нежелательными вертикальной прокрутки, а) ->link

Взгляните на этот шаблон jsfiddle: http://jsfiddle.net/z6F3h/2/ Она должна иметь эффект реализован. Я считаю, что мне нужно изменить ... setTop и setLeft Свойства

Answer 1

Создатель плагина stellar.js дал большой фундамент для этого, чтобы он перемещался по горизонтали и вертикали в одно и то же время.

How to move/animate elements in from the side with Stellar.js on a vertical scroll?

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

http://jsfiddle.net/QGd9g/995/

Изменения, которые я сделал были иметь originalTop - NEWTOP, вместо того, чтобы просто установив сверху, чтобы быть новым Top.

$(function(){ 
    $.stellar.positionProperty.apple = { 
     setTop: function($el, newTop, originalTop) { 
      $el.css({ 
       'top': originalTop - newTop, 
       'left': $el.hasClass('apple') ? originalTop - newTop : 0 
      }); 
     } 
    }; 

    $.stellar({ 
     verticalOffset: 200, 
     horizontalScrolling: false, 
     positionProperty: 'apple' 
    }); 
}); 

Что сложно о том, что я сделал (там может быть лучшим решением), является то, что вы setLeft, и слой будет двигаться вправо.