Как решить проблему «соскакивания» паралакса?

Question

[VeyDlin]

Написал простой паралакс: jsfiddle.net/69r4L5d4

Проблема в том, что когда курсор пропадает из поля зрения экрана и потом снова появляется, то паралакс соскакивает и квадрат оказывается резко в новой позиции.

Как можно реализовать плавную смену позиции?

Answer 1

[Сергей Сергей]

По событию "mousemove" только запоминать координаты мыши, а вычислять позицию слоев паралакса в какой-нибудь функции, которая запускается по таймеру и при этом ограничивает перемещение слоев так, чтобы достигать необходимой позиции постепенно в несколько шагов.

Собственно jsfiddle.net/69r4L5d4/2
можно по-другому сделать вычисление анимации, тут по предпочтениям.

Comments

[VeyDlin]

Может тогда подскажете, как реализовать плавность?
т.е. чтобы при приближении к конечной позиции паралакс замедлялся?

[Сергей Сергей]

ВэйДлин: вычисление сх отвечает за скорость приближения, сюда можно воткнуть какую-нибудь другую формулу движения: ниспадающая синусоида, парабола, логарифм.
jsfiddle.net/69r4L5d4/3 - у меня тут какая-то простая арифметика.

Где-то есть библиотека, где можно выбирать формулы для таких анимаций, но не помню название.