• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

새 애니메이션이 작동하지 않습니다.

20.12.23 18:33 작성 조회수 108

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 = 'translateX(${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]; //현재 활성화된 (visible 클래스가 붙은) .graphic-item을 지정
    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);
        }
    }

    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){

                if(currentItem){
                    inactivate();
                }

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

    })

    activate();
})();
일단 콘솔 오류창에서 아무 오류도 안나는데 새 애니메이션이 전혀 작동하지 않습니다.
CSS도 따라 써보고 오타 있는지 확인해봐도 움직이지 않네요

답변 1

답변을 작성해보세요.

3

Soom님의 프로필

Soom

2021.02.28

document.querySelector('[data-index="2"] .bird').style.transform = 'translateX(${window.innerWidth}px)';
위 코드에서 템플릿 리터럴 써주셨는지 한번 확인해보세요.
' <- 이 따옴표가 아니라 ` <- 요 백틱 써주셔야해요. (숫자 1 왼쪽에 있는 버튼)