inflearn logo
강의

Khóa học

Chia sẻ kiến thức

Tạo tờ rơi 3D - Dự án web tương tác

Làm Brochure 3D #7

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

319

kha2858

1 câu hỏi đã được viết

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 인터랙티브-웹

Câu trả lời 1

0

studiomeal

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

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

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

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

연애인 사주는 그냥 넣어도 상관없나요?

0

34

1

14강. 업체 연결이 필요하신 분은 개인톡으로 문의해주세요.

0

36

1

인프당 무당 캐릭터 뽑는 프롬프트

0

44

2

10월 15일 삭제예정 강의 문의

0

41

1

강의가 중복됐어요

0

55

1

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

0

127

1

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

0

172

1

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

0

135

0

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

0

1102

1

질문 있습니다ㅠ.ㅠ..

0

456

1

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

0

292

1

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

0

312

1

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

0

447

1

줌인 상태일 때

0

312

1

이벤트 위임 방식 질문

0

288

1

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

3

466

1

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

0

334

1

질문있습니다.

0

252

1

선생님 질문잇습니다. ㅠ

0

321

1

질문이 있어요

1

280

1

질문 있습니다.

0

424

2

선생님 질문 있습니다!

1

316

2

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

0

453

2

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

0

414

4