inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

3D 리플릿 만들기 #7

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

269

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;
 를 추가해주시면 해결 될거예요 :)
강의에도 코멘트 업데이트 해놓아야겠네요. 알려주셔서 감사합니다^^

ZIP 파일

0

10

2

26강 13F 강의 불일치 및 질문 요청

0

15

3

state 객체로 묶기

0

8

0

XAMPP에서 Apache, DB 재기동 시 접속안되는 문제

0

16

1

Breadth (등락 비율) 분석

0

20

1

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

0

49

1

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

0

118

1

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

0

92

0

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

0

1045

1

질문 있습니다ㅠ.ㅠ..

0

409

1

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

0

239

1

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

0

401

1

줌인 상태일 때

0

267

1

이벤트 위임 방식 질문

0

230

1

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

3

420

1

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

0

288

1

질문있습니다.

0

210

1

선생님 질문잇습니다. ㅠ

0

270

1

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

1

274

1

질문이 있어요

1

248

1

질문 있습니다.

0

375

2

선생님 질문 있습니다!

1

269

2

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

0

395

2

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

0

343

4