Who knows how to make an object move horizontally when scrolling?

Question

css

and so there is the code

<div id="axis" class="one">
<img class="object van move-right" src="images/van-to-right.png" alt="" /></div>

.object {
    position: absolute;
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
}
.van {
    top: 45%;
    left: 44%;
}
#axis:hover .move-right{
    transform: translate(350px,0);
    -webkit-transform: translate(350px,0); /** Chrome & Safari **/
    -o-transform: translate(350px,0); /** Opera **/
    -moz-transform: translate(350px,0); /** Firefox **/
}

here is a demo d3pr5r64n04s3o.cloudfront.net/articles/042_css_ani...
the point is, now the code is implemented so that the movement occurs when hovering over the object, but you need to make sure that the movement occurs when the page is scrolled at the moment when the object enters the field Apparently, who will tell you how to implement this?

Answer 1

How to add and remove a class on call?
For a place hover - class.

#axis.transform .move-right{
    transform: translate(350px,0);
}

And read at your leisure about the autoprefixer .

Answer 2

I tried this using jQuery

function checkScroll() {
  $(*id элемента*).each(function() {
    var topEdge = $(this).offset().top,
        bottomEdge = topEdge + $(this).height(),
        wScroll = $(window).scrollTop();

    if(topEdge < wScroll && bottomEdge > wScroll) {
      *делаем смещение путем добавления нужного класса CSS*
    }
  });
};