Why does the simple “parallax” effect slow down?

Question

css

Greetings!
I have a fixed size div. The background of this block is a photograph of obviously larger sizes. And centered: background-position: center center;
I want to make an animation of shifting the background photo by moving the mouse over this block. When the cursor moves to the bottom edge, the photo moves up, showing its bottom, etc. It is advisable to do this not with linear animation, but with proportional slowdown (the closer the cursor approaches the edge).
Googled a couple of solutions - they all work through backgorund-position X Y animation.
It looks very uneven, jerky.
Now on the site https://cloud.mail.ru/ - I saw a super-smooth animation. (and there are many more layers)
I tried to figure it out, it uses "CSS3-properties transform and transition". Never dealt with them until I can figure it out.
Does anyone have any ready made solutions? Or links-examples to poke a nose?
I will be grateful. Thank you!
Current implementation: turnado.net/ua/sevastopol/industrial.tour

Answer 1

wagerfield.github.io/parallax try everything there

Answer 2

Here is an example. Pretty smooth, I think. jsfiddle.net/6FeHh

Answer 3

@librown
habrahabr.ru/post/158901