Как сделать правильный паралакс?

Question

[Alex_mersvg]

Второй день думаю как написать плавный паралакс для вертикального скрола. Есть два блока, один ниже другой выше как на картинке. Нужно по мере скрола страницы блок 2 сделать tranlateY - 200px, а блок 1 соответственно на + 200px, и при обратном скроле наоборот. В основном, мне бы понять что от чего высчитывать, как вообще это работает.

Answer 1

[RAX7]

Самописное решение на коленке выглядит примерно так:

Есть и готовые библиотеки для этого:
https://dixonandmoe.com/rellax/
https://locomotivemtl.github.io/locomotive-scroll/

Answer 2

[Ilya Olovyannikov]

https://learn.javascript.ru/onscroll

Вот тут ^ достаточно подробно! :)

Comments

[Alex_mersvg]

речь идет о паралаксе и как его правильно посчитать, а не о событиях мыши

[Gary_Ihar]

Alex_mersvg, с помощью этого события мыши Вы сможете легко позиционировать ваши блоки относительно всего, чего захотите. Нужно будет лишь придумать формулу