使用famo.us进行无限视差滚动

Question

我有一个scrollview和一个图像作为不同表面的背景，z-index较低。我想以滚动视图的一半速度滚动图像。

有关如何实施它的任何想法？

Answer 1

我不能给你一个完整的解决方案，但这应该会让你走上一条不错的道路。

1）Famo.us已经开发了多个scrollViews。每个方法都有一个稍微不同的方法来从中获取'scrollTop'值。

• 之前创建的那个只为您提供列表中第一个可见元素的scrollTop值。因此，在这种情况下，您可以获取滚动了多少元素并自己计算实际值。或者，如果scrollView中的元素数量少且数量有限，则应将所有元素包装在单个视图中，并将singleView传递给scrollView。这种方式Famo.us必须对屏幕外元素进行计算，但如果元素的数量足够小，它可以使许多动画/计算更容易。

• 第二个scrollView在内部调用了LimitedScrollView。我对它没有多少经验，但无论如何它应该给你正确的值。

2）ScrollView在滚动时触发事件。用它来更新可转换的值。

伪代码：

scrollView.on('scroll', function(){
  transitionable.set(scrollView.scrollTop)
});

3）现在，您可以将背景的变换值绑定到可转换的。

伪代码：

background.transformFrom(function(){
  return Transform.translate(0, -transitionable.get()/2, 0);
});

现在，事情应该正常。

希望有所帮助。