Создайте эффект слайда параллакса при прокрутке

Question

Я пытаюсь создать эффект параллакса. У меня есть 10 фоновых изображений и восемь изображений переднего плана. Вот скрипка, чтобы показать, что я придумал до сих пор:

Fiddle

красных квадраты представляют изображения переднего плана.

Теперь мне нужно как-то подгонять изображения переднего плана, как будто они скользят снизу во время прокрутки и выходят из экрана вверху, так что вперед и назад, как дождь падает (и вверх :) Итак, на переднем плане изображения движутся быстрее фоновых изображений.

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

Answer 1

Я пробовал this Guide один раз, и это сработало. Чем больше вы перемещаете divs с помощью правила translateZ, тем медленнее он перемещается.