인프런 커뮤니티 질문&답변

인생꿀잼님의 프로필 이미지
인생꿀잼

작성한 질문수

BBC 인터랙티브 페이지 "코로나19가 바꿀 사무실의 미래" 클론

JS part 2

action이 true일때 실행되는데 false에서 초기화가 안되요ㅠ

작성

·

228

0

(()=>{

  const actions = {
    birdFlies(key){
      if(key){
        document.querySelector('[data-index="2"] .bird').style.transform = `translateX(${window.innerWidth}px)`;
      } else{
        document.querySelector('[data-index="2"] .bird').style.transform = `translateX(-100%)`;
      }
      
    },
    birdFlies2(key){
      if(key){
        document.querySelector('[data-index="5"] .bird').style.transform = `translate(${window.innerWidth}px, ${-window.innerHeight * 0.7}px`;
      } else{
        document.querySelector('[data-index="5"] .bird').style.transform = `translateX(-100%)`;
      }
      
    }

  };
  const stepElems = document.querySelectorAll('.step');
  const graphicElems = document.querySelectorAll('.graphic-item');
  let currentItem = graphicElems[0]; 
  let ioIndex;

  const io = new IntersectionObserver((entriesobserver=> {
    ioIndex = entries[0].target.dataset.index * 1;
  });

  for(let i = 0i < stepElems.lengthi++){
    io.observe(stepElems[i]);

    stepElems[i].dataset.index = i
    graphicElems[i].dataset.index = i;
  }

  function activate(action){//활성화
    currentItem.classList.add('visible');
    if(action){
      actions[action](true);
    }
  }

  function inactivate(action){//비활성화
    currentItem.classList.remove('visible');
    if (action) {
      actions[action](false);
  }
  }

  window.addEventListener('scroll', () => {
    let step;
    let boundingRect;

    for(let i = ioIndex - 1i < ioIndex + 2i++){
      step = stepElems[i]; 
      if(!stepcontinue;
      boundingRect = step.getBoundingClientRect();
     
      if(boundingRect.top > window.innerHeight * 0.1 && 
        boundingRect.top < window.innerHeight * 0.8){

          inactivate();          
          currentItem = graphicElems[step.dataset.index]; 
          activate(currentItem.dataset.action);
      }
    }
  });

  window.addEventListener('load', () => {
    setTimeout(() => scrollTo(00), 100);
  });

  activate();
})();

답변 2

1

inactivate();   // 인수가 빠져있습니다.

 inactivate(currentItem.dataset.action); //이런형식으로 인수를 넣어주시면 됩니다.

0

인생꿀잼님의 프로필 이미지
인생꿀잼
질문자

감사합니다ㅜㅠ 잘 작동돼요..!

인생꿀잼님의 프로필 이미지
인생꿀잼

작성한 질문수

질문하기