Parallax эффект при скролле в одном div?

Question

[Денис]

Скажем так, есть контейнер высотой 750px и шириной 100% залитый изображением фон с звездами, будем считать его главным. Поверх или внутри (не знаю как правильно) расположено другое прозрачное изображение с планетами, поверх всего этого лежит ещё одно с ракетой.
Затем поверх лежит ещё одно прижатое к низу самого первого контейнера.
Получается так сказать многоуровневость изображений в одном блоке.
Как сделать parallax эффект при скролле? Что бы первое изображение с фоном было фиксировано а остальные двигались с разной скоростью.
Смотрел много библиотек parallax но так и не нашел нужной дабы сделать несколько изображений в одном блоке. Попадаются примеры с движением мыши но не при скролле.
Прошу помощи. Чем можно реализовать такое?

Answer 1

[GreatRash]

Вы знаете величину скролла (допустим проскроллили на 100 пикселей), далее вы должны сместить изображение на эту величину в противоположном направлении. Каждый слой должен иметь некий коэффициент смещения. Чем ближе слой к наблюдателю (т.е. чем больше его z-index), тем больше коэффициент (но не более 1).

Например:
слой 1 (звёзды - самый дальний от нас): смещение = 100 * 0,3
слой 2 (планеты): смещение = 100 * 0,6
слой 3 (ракета): смещение = 100 * 0,9

Крутим вниз, смещаем вверх. Я коэффициенты подобрал от балды (1 / 3 ~= 0,3), с ними можно поэкспериментировать.

Comments

[Денис]

Что то я не совсем понял с этими коэффициентами. А нет ли какой статьи или примера?

[GreatRash]

Денис: Что-то типа того: codepen.io/GreatRash/pen/WrmKLv

[Денис]

GreatRash: Спасибо большое, всё оказалось гораздо проще чем думал.

Answer 2

[Михаил Чирский]

Хорошая либа, можно настроить скорость каждого отдельного блока
markdalgleish.com/projects/stellar.js