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);
}

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

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

 

[codingapple]

스크롤이벤트리스너는 1개만 쓰고 그 안에서 if문 3개 씁시다

[조동우]

스크롤이벤트리스너는 1개만 쓰고 그 안에서 if문 3개 씁시다
라고 하시는건 이미지가 3개라서 그런건가요?
각 이미지별로 시작되는 window.scrollY 가 다 다르니
각각의 이미지 마다 if 문으로 조건을 넣어 주라는 것 같은데요..
만약 이미지가 더 많아 진다면 그때마다 계속 if문으로 넣어주라는 것인지요?

[codingapple]

넴 이미지마다 if문 써야할듯요
비슷한 코드들은 반복문으로 줄입시니다

[글쓴이]

글