垂直滚动的水平位置移动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，层会向右移动。