Good day! Please help with animation.

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

The meaning is as follows:
The default image for the picture is the margin-left: 10px; property margin-left: 10px;
The script should assign this property a margin-left: 50px;
When we start scrolling the page, we scroll up to the picture, and when it only appears at the bottom of the screen, it has a margin-left: 50px; property margin-left: 50px;
Scroll it further, and the image reaching the screen center (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;

Thank you very much for the help!

    1 answer 1

    Look in the direction of $(window).scrollTop() : jsfiddle

    Probably it is worth adding data-* attributes for which you will be checking.

    • Artem, I welcome you! I looked at your example. Yes, the principle is. But here's what, by default the block you put margin 50px. And I need the default margin of 10px. And the script forcibly assigned the value of the property 50px, and with the same property (50px) the block was fully displayed at the bottom of the screen. And when we scroll the page further up, then from the bottom of the screen to the center of the screen, the property of the block changed smoothly from 50px to 10px. Like, for example, codepen.io/husamui/pen/IyrJk - only in this example, everything is in the opposite direction, and there are more different functions than I need. - LADYX
    • So it’s quite simple then, you need to calculate the percentage of scrolling and based on it move the picture (there are already many options depending on how it should look like in the final); if, as in the example, it is not margin but position: fixed; top: 50%; left: 10px; position: fixed; top: 50%; left: 10px; - Artem Gorlachev
    • position: fixed will definitely not suit me; the page layout will not allow it. In addition, I will have a lot of such blocks on the page (this photo of the authors of the quotations will have such an effect). Some blocks will move from left to right, others from right to left, and still others should move upwards, i.e. when scrolling all, margin margin will change a little. And I don’t understand how I can use the script to force the default margin of 50px, when I have a margin of 10px in style. - LADYX
    • So the script it will rise on top of your style (directly in the dom is more important than css); $('.mydiv').css({margin:'50px'}); - Artem Gorlachev
    • Artem, I apologize for the long silence. I can not, no matter how hard I tried. I would like to ask you to give an example. At least simply, without smooth animation, I will finish it according to my needs. Thank. - LADYX