가운데 페이지만 줌인이 됩니다
268
1 asked
양 옆 페이지의 요소들을 클릭해도 줌인이 안되고, 가운데 페이지의 요소만 줌인이 됩니다. 왜 그런지 모르겠어요... 올려주신 소스코드에서 그대로 해도 양 옆은 줌인이 되지 않습니다. 파이어폭스에서는 작동하는데 이미지가 표시되지 않습니다
(() => {
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();
}
});
})();
Answer 1
0
앗, 저도 몰랐는데 최근에 크롬이 업데이트 되면서, 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

