Как переместить и увеличить объект внутри блока при прокрутке страницы jQuery?

Как в зависимости от скролла увеличить и переместить объект за его пределы?

Есть на заднем фоне дорога (background), на переднем плане автомобиль (.car) с position: absolute, нужно чтобы автомобиль перемещался вперед и немного увеличивался, для создания эффекта движения, но только тогда, когда автомобиль находится в поле видимости пользователя. То есть движение блока внутри контейнера, в зависимости от скролла пользователя, в момент когда он находится в поле его зрения.

<section class="road">
  <div class="container">
    <div class="car"></div>
  </div>
</section>

Пробовал примерно следующее, но не совсем то, что нужно, не силён в jQuery.

$(window).on('scroll', function() {
       car = $('.car');
       scrollTop = $(this).scrollTop();
       changed = scrollTop - $('.road').outerHeight();
       changed2 = (scrollTop - $('.road').outerHeight()) / 5;
       var scrollBottomCar = $('.road').height() - car.offset().top - car.outerHeight();
        
       car.css('transform', 'translateY('+changed+'px) translateX(-'+changed2+'px)');
});