• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

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

22.01.24 14:30 작성 조회수 121

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

    });
})();

답변 1

답변을 작성해보세요.

0

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

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