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

안녕하세요 , 23년도에도 듣고 계신 분이 계실지는 모르겠지만.. 강의 들으면서 혹시 막히시는 부분들 제가 수업 들으면서 작성한 코드와 비교해서 본인이 작성한 어떤 부분이 잘못되었는지 확인하시면 문제해결에 도움이 될듯해서요 !

• birdflies 함수 작성에서 작은 따옴표가 아닌 ` <- 이 부분 (숫자 1 옆의 템플릿 리터럴 )

   

• 활성화 > 비활성화가 되었을 때 다시 돌아오지 않는 부분 이였습니다.

위 두가지에서 시간이 좀 잡아먹었는데 저와같은 분들이라면 제 js 랑 비교해보세요 ㅋㅋ

( 이 부분은 애니메이션이 완전히 끝까지 완료 후 스크롤을 내려야 다시 활성화 되었을 때 애니메이션이 제자리에서 작동을 하더라구요. )

html {
	font-family: 'Noto Sans KR', sans-serif;
}
body {
	margin: 0;
}
div, section, header, footer, p, h1, h2 {
	box-sizing: border-box;
}
a {
	color: royalblue;
}
img {
	max-width: 100%;
	height: auto;
	
}

/* 배경이 되는 이미지들 */
.global-width{
	max-width: 620px;
	margin: 0 auto;
	padding: 0 1rem;
	
}

.scroll-graphic{
	overflow-x: hidden;
	position:sticky;
	top:0;
	height: 100vh;

}
.graphic-item{
	display: flex;
	align-items: center;
	justify-content: center;
	position:absolute;
	left: 0;
	top:0;
	width: 100vw;
	height: 100vh;
	opacity: 0;
	transition: 0.5s;
	will-change: opacity;
}
.visible{
	opacity: 1;
}

.scene-img{
	max-height: 100vh;
}

.scroll-text{
	position: relative;
	padding-bottom: 1px;
}

.step{
	margin-bottom: 60vh;
	padding: 0.5rem 1rem;
	border-radius: 10px;
	border : 0.2px solid rgba(216,216,216,0.2);
	box-shadow: rgba(0,0,0,0.3)0 0 3px;
	background: rgba(255,255,255,0.8);
}
.bird{
	position:absolute;
	left: 0;
	bottom:70%;
	width: 100px;
	transform:translateX(-100%);
	transition:1.5s 0.5s linear;
}

[data-index="5"] .bird{
	left: 30%;
	bottom:30%;
}

.global-footer{
	text-align: center;
	padding:2rem 0;
}
.strikethrough{
	text-decoration: line-through;
}

// 전역변수 사용 회피 
(() => {

    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((entries,observer)=>{
     
        ioIndex = entries[0].target.dataset.index *1 ;
        console.log(ioIndex);
    })
    for (let i = 0; i < stepElems.length; i++) {
 
        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-1; i<ioIndex+2; i++){
           
            step = stepElems[i];
            if(!step) continue;

            boundingRect = step.getBoundingClientRect();
           
            if(boundingRect.top > window.innerHeight*  0.1 &&
                boundingRect.top < window.innerHeight*0.8){
                 
                    inactivate(currentItem.dataset.action);
                    currentItem = graphicElems[step.dataset.index];
                    activate(currentItem.dataset.action);
                    
                   
            }

           
        }
    });

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