inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

3D 리플릿 만들기 #7

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

277

HZ

작성한 질문수 1

0

양 옆 페이지의 요소들을 클릭해도 줌인이 안되고, 가운데 페이지의 요소만 줌인이 됩니다. 왜 그런지 모르겠어요... 올려주신 소스코드에서 그대로 해도 양 옆은 줌인이 되지 않습니다. 파이어폭스에서는 작동하는데 이미지가 표시되지 않습니다

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

    function getTarget(elem, className) {
		while (!elem.classList.contains(className)) {
			elem = elem.parentNode;

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

        return elem;
	}

    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;
		}

        document.body.classList.add('zoom-in');
        leaflet.style.transform = `translate3d(${dx}px, ${dy}px, 50vw) rotateY(${angle}deg)`;
        currentMenu = elem;
        currentMenu.classList.add('current-menu');
    }

    function zoomOut() {
		leaflet.style.transform = 'translate3d(0, 0, 0)';
		if (currentMenu) {
			document.body.classList.remove('zoom-in');
			currentMenu.classList.remove('current-menu');
			currentMenu = null;
		}
	}
    
    function closeLeaflet() {
		pageCount = 0;
		document.body.classList.remove('leaflet-opened');
		pageElems[2].classList.remove('page-flipped');
		setTimeout(() => {
			pageElems[0].classList.remove('page-flipped');
		}, 500);
	}

    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();
            zoomOut();
        }

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

        let backBtn = getTarget(e.target, 'back-btn');
        if (backBtn) {
            zoomOut();
        }

    });
})();

질문 javascript HTML/CSS 인터랙티브-웹

답변 1

0

1분코딩

앗, 저도 몰랐는데 최근에 크롬이 업데이트 되면서, 3D 처리에 대한 부분이 변경이 된 것 같습니다!
3D 효과가 중첩되는 경우 자동으로 인식이 안되어서, preserve-3d를 이벤트가 필요한 요소들에 모두 넣어주면 해결됩니다.

.menu-list와 .menu-item의 CSS에
transform-style: preserve-3d;
 를 추가해주시면 해결 될거예요 :)
강의에도 코멘트 업데이트 해놓아야겠네요. 알려주셔서 감사합니다^^

설치 및 설정 가이드 노션 자료는 없나요 ?

0

14

2

강의가 누락된것 같습니다.

0

27

2

용어 발음법이 계속 바뀌는 것 같은데 이런 부분들 개선이 가능할까요...?

0

36

1

counter01.html은 어디있을까요?

1

16

1

수업자료 문의

0

29

2

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

0

59

1

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

0

138

1

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

0

100

0

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

0

1063

1

질문 있습니다ㅠ.ㅠ..

0

423

1

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

0

246

1

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

0

410

1

줌인 상태일 때

0

277

1

이벤트 위임 방식 질문

0

237

1

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

3

426

1

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

0

296

1

질문있습니다.

0

222

1

선생님 질문잇습니다. ㅠ

0

281

1

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

1

280

1

질문이 있어요

1

256

1

질문 있습니다.

0

383

2

선생님 질문 있습니다!

1

279

2

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

0

405

2

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

0

356

4