Apple sticky 이미지 관련 질문 입니다.

안녕하세요.
제이쿼리를 사용하지 않고 공부하고 있습니다.
때문에 질문드리게 되었네요.

일단 작동은 문제가 없는데,
제이쿼리를 쓰지 않고 했을떄

var a = -1 / 450;
var b = 2;
var c = -0.000222;
var d = 1.1;

var div_num = document.querySelectorAll('.card img');
console.log(div_num.length);
function scroll_img(bt) {
  window.addEventListener('scroll', function () {
    var y = a * (window.scrollY - 450 * bt) + b;
    var size = c * (window.scrollY - 450 * bt) + d;
    if (window.scrollY > 450 + 450 * bt) {
      document.querySelectorAll('.card img')[bt].style.opacity = y;
      document.querySelectorAll('.card img')[bt].style.transform =
        'scale(' + size + ')';
    }
  });
}

for (var i = 0; i < div_num.length; i++) {
  scroll_img(i);
}

이렇게 말고는 방법이 없는간가요?
제이쿼리를 사용하지 않고 만들어 보니, 모든 이미지가 같은 시간에 모두 반응 합니다.
제이쿼리를 쓰지 않고 좀더 효율 적인 방법은 없을까요?

좋은 답변 부탁 드립니다..