inflearn logo
강의

講義

知識共有

3Dリーフレットの作成 - インタラクティブWebプロジェクト

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

studiomeal

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

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

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

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

강의 듣는 순서가 어떻게 되나요?

0

14

1

안녕하세요, 강좌 5의 피그마 파일은 어디서 볼 수 있나요?

0

28

1

stopPropagation()에 대해서 질문 있습니다.

0

27

2

12.13) 하단 여백 스타일링 관련 질문 드립니다.

0

37

2

27강 Context내 RSC 사용 관련 문의

0

39

3

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

0

52

1

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

0

124

1

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

0

94

0

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

0

1051

1

질문 있습니다ㅠ.ㅠ..

0

416

1

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

0

243

1

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

0

271

1

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

0

407

1

줌인 상태일 때

0

273

1

이벤트 위임 방식 질문

0

232

1

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

3

421

1

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

0

294

1

질문있습니다.

0

215

1

선생님 질문잇습니다. ㅠ

0

273

1

질문이 있어요

1

250

1

질문 있습니다.

0

378

2

선생님 질문 있습니다!

1

272

2

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

0

398

2

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

0

350

4