How to implement block animation when scrolling the page?

Question

JavaScript

Good afternoon! Please help with animation.

On my page I use the plugin https://github.com/Prinzhorn/skrollr , but I think it is not reasonable to use the whole plugin for only a few effects. Namely, I need only one effect - movement when scrolling the page of only three blocks (changing their margin).
An example with the skrollr plugin https://jsfiddle.net/LADYX/q7dw096f/

The meaning is as follows:
The image in the default style has the property margin-left: 10px;
The script should assign this image property margin-left: 50px;
When we start scrolling the page, we scroll to the image, and when it first appears at the bottom of the screen, it has the property margin-left: 50px;
We scroll it further, and the picture reaching the center of the screen (meaning vertically) smoothly reduces the property to margin-left: 10px;
And the same thing back, from the center of the screen to the bottom of the screen, the picture property changes from margin-left: 10px; on margin-left: 50px;

Here I'm trying to do https://jsfiddle.net/LADYX/6smL4jwz/ , but I'm not quite able to do it. Thank you very much for the help!

Answer 1

Hello. Animate.css will help you https://www.youtube.com/watch?v=zrGgSDVzpQI