inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

3D리플릿 만들기 - 인터랙티브 웹 프로젝트

3D 리플릿 만들기 #7

줌인이 왜 안되는지를 모르겠어요..

274

kha2858

작성한 질문수 1

1

(() => {
    const leaflet = document.querySelector(".leaflet");
    const pageElems = document.querySelectorAll(".page");
    let pageCount = 0;

    function getTarget(elem, className){ //부모노드까지 위임
        while(!elem.classList.contains(className)){
            elem = elem.parentNode;

            if(elem.nodeName =='BODY'){
                elem = null;
                return;
            }
        }
        return elem;
    }


    function closeLeaflet(){
        pageCount=0;
        document.body.classList.remove('leaflet-opened');
        pageElems[2].classList.remove('page-flipped');
        setTimeout(() => {
            pageElems[0].classList.remove('page-flipped');
        },500);
    }

    function zoomIn(elem){
        const rect = elem.getBoundingClientRect();
		const dx = window.innerWidth/2 - (rect.x + rect.width/2);
        const dy = window.innerHeight/2 - (rect.y + rect.height/2);
        let angle;
        switch(elem.parentNode.parentNode.parentNode.dataset.page*1){
            case 1:
                angle = -30;
                break;
            case 2:
                angle = 0;
                break;
            case 3:
                angle =30;
                break;
        }
        console.log(elem.parentNode.parentNode.parentNode.dataset.page);
        leaflet.style.transform = `translate3d(${dx}px, ${dy}px, 50vw) rotateY(${angle}deg)`;
    }

    leaflet.addEventListener('click',e =>{
        let pageElem = getTarget(e.target, 'page');
        if(pageElem){
            pageElem.classList.add('page-flipped');
            pageCount++;
            if(pageCount ==2){
                document.body.classList.add('leaflet-opened');
            }
        }

        let closeBtnElem = getTarget(e.target, 'close-btn');

        if(closeBtnElem){
            closeLeaflet();
        }
        
        let menuItemElem = getTarget(e.target, 'menu-item');
        if(menuItemElem){
            zoomIn(menuItemElem);
        }
    });
})();

HTML/CSS javascript 인터랙티브-웹

답변 1

0

1분코딩

혹시 CSS leaflet 클래스에 애니메이션을 미리 넣으셨을까요?

.leaflet {
    ....
    ....
    animation: start-ani 1s forwards;
}

animation은 마지막 챕터에서 추가하는데, 완성파일에 있는 CSS를 미리 복사해 넣으셨으면 들어가있을 가능성이 있어서요. animation에서도 transform을 정의하는 부분이 있어서 충돌나는 부분이 생겨서 줌 동작이 안되고, 해당 파트에서 그걸 해결하는 내용이 함께 나옵니다.
일단 CSS에 animation이 들어가있다면 저 부분을 주석처리 해주세요.

만약 그 원인이 아니라면, css도 같이 올려주시면 봐드릴게요~
현재 작성중인 js는 특별히 문제가 안보입니다^^

프론트엔드 학습 수준 문의

0

8

1

선생님 각 강좌마다 예시로 보여주시는 웹페이지들은 어디서

0

9

1

퍼플렉시티 최소 결제단위 50달러로 바뀐 것 같습니다.

0

29

2

리액트 챕터별 코드에서 eslint 설정파일이 없어요

0

34

2

claude plugin 방법 자세히 부탁드려요

0

33

2

transform-style: preserve-3d; 를 추가하면

0

47

1

Babel의 사용법 아래 링크의 영상이 비공개 동영상이라고 뜹니다.

0

115

1

페이지 클래스리스트 제거 해줬을때

0

91

0

페이지를 클릭할 때 Uncaught TypeError: Cannot read properties of undefined (reading 'contains') 에러가 뜹니다.

0

1044

1

질문 있습니다ㅠ.ㅠ..

0

409

1

클릭 시 자꾸 page element만 인식됩니다.

0

239

1

가운데 페이지만 줌인이 됩니다

0

267

1

body에 perspective를 주면 갑자기 html과 body 높이가 0이 됩니다

0

401

1

줌인 상태일 때

0

265

1

이벤트 위임 방식 질문

0

228

1

이사람 누군지 아세요..?

3

420

1

선생님 질문있습니다 이 강의를 리액트환경에서 적용하고싶은데요,

0

288

1

질문있습니다.

0

210

1

선생님 질문잇습니다. ㅠ

0

270

1

질문이 있어요

1

248

1

질문 있습니다.

0

374

2

선생님 질문 있습니다!

1

268

2

쌤 화면 크기 줄엿을때 글자들 삐져나오는거는 어떻게 해결하죠?

0

395

2

소스코드 압축이 풀리지 않습니다.

0

340

4