Масштабирование элемента по скроллу на Java Script?

Question

[barsandra]

Необходимо написать функцию на чистом JS, чтобы картинка масштабировалась по скроллу.

<div class="block">
  <img src="" alt="">
</div>

Answer 1

[Yuriy Vorobyov]

Вот:
jsfiddle.net/7cuh0apo/1

Если не открывает, то вот:

код

<div class="block">
  <img src="https://miro.medium.com/max/8452/1*BR2RiTRoYor9xSrzEgxLWQ.jpeg">
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

img {
    position: fixed;
    left: 0;
    top: 0;
    width: 100px;
    height: 100px;
}

$(window).on("scroll", function() {
    var s = 400 - Math.min(400, $(document).scrollTop());
    $("img").width(s).height(s);
});

Или посмотрите тут вариант на transitions