inflearn logo
강의

Course

Instructor

Creating 3D Leaflets - Interactive Web Project

Making 3D Leaflet #7

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

268

HZ

1 asked

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

Answer 1

0

studiomeal

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

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

Json 플러그인 사용시 variable collection 없음

0

12

1

배리어블 목록 없음

0

21

3

Token 등록 방법 문의

0

18

1

3강 질문

0

15

1

74. 데이터 캐시 - 1 (이론) 강의 영상 누락

0

26

1

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

0

47

1

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

0

117

1

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

0

92

0

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

0

1044

1

질문 있습니다ㅠ.ㅠ..

0

409

1

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

0

239

1

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

0

401

1

줌인 상태일 때

0

266

1

이벤트 위임 방식 질문

0

229

1

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

3

420

1

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

0

288

1

질문있습니다.

0

210

1

선생님 질문잇습니다. ㅠ

0

270

1

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

1

274

1

질문이 있어요

1

248

1

질문 있습니다.

0

374

2

선생님 질문 있습니다!

1

268

2

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

0

395

2

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

0

340

4