在滚动时创建视差滑动效果

Question

我正在尝试创建一个类似视差的效果。我有10个背景图像和8个前景图像。这里有一把小提琴来展示我到目前为止的想法：

Fiddle

红色方块表示前景图像。

现在，我需要以某种方式设置前景图像的动画，就好像它们在滚动时从底部滑入，然后从顶部滑出屏幕，来回滑动，就像雨点一样落下（然后向上：）所以前景图像的移动速度比背景图像快。

我已经尝试了很多东西，但真的不知道从哪里开始。Skrollr.js也是一种选择，但这确实是一种需要学习的东西，我想必须有一个更简单的解决方案。

Answer 1

我试过一次本指南，它成功了。使用translateZ规则向后移动div越多，移动速度就越慢。

编辑：url已损坏，已更新url