垂直滾動的水平位置移動Stellar JS

Question

我的水平偏移效應存在困難。我只想使用Stellar JS在垂直滾動上水平移動一個img。到目前爲止，我有一個1800像素高的容器元素和一個內部高度爲&的寬度是在加載時動態設置的（基於視口...即它的高度是視口的高度，寬度的比例寬於視口）。

當從容器頂部垂直滾動到容器底部時，我希望從其左邊緣向左滑動到其右邊緣。因此，在容器的頂部，將左對齊並向右溢出，然後在容器的底部，將右對齊並向左溢出。

這裏是由恆星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，而不是隻設置頂部是新的頂部。

$(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，層會向右移動。