줌인이 왜 안되는지를 모르겠어요..
274
작성한 질문수 1
(() => {
const leaflet = document.querySelector(".leaflet");
const pageElems = document.querySelectorAll(".page");
let pageCount = 0;
function getTarget(elem, className){ //부모노드까지 위임
while(!elem.classList.contains(className)){
elem = elem.parentNode;
if(elem.nodeName =='BODY'){
elem = null;
return;
}
}
return elem;
}
function closeLeaflet(){
pageCount=0;
document.body.classList.remove('leaflet-opened');
pageElems[2].classList.remove('page-flipped');
setTimeout(() => {
pageElems[0].classList.remove('page-flipped');
},500);
}
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;
}
console.log(elem.parentNode.parentNode.parentNode.dataset.page);
leaflet.style.transform = `translate3d(${dx}px, ${dy}px, 50vw) rotateY(${angle}deg)`;
}
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();
}
let menuItemElem = getTarget(e.target, 'menu-item');
if(menuItemElem){
zoomIn(menuItemElem);
}
});
})();
답변 1
0
혹시 CSS leaflet 클래스에 애니메이션을 미리 넣으셨을까요?
.leaflet {
....
....
animation: start-ani 1s forwards;
}
animation은 마지막 챕터에서 추가하는데, 완성파일에 있는 CSS를 미리 복사해 넣으셨으면 들어가있을 가능성이 있어서요. animation에서도 transform을 정의하는 부분이 있어서 충돌나는 부분이 생겨서 줌 동작이 안되고, 해당 파트에서 그걸 해결하는 내용이 함께 나옵니다.
일단 CSS에 animation이 들어가있다면 저 부분을 주석처리 해주세요.
만약 그 원인이 아니라면, css도 같이 올려주시면 봐드릴게요~
현재 작성중인 js는 특별히 문제가 안보입니다^^
프론트엔드 학습 수준 문의
0
8
1
선생님 각 강좌마다 예시로 보여주시는 웹페이지들은 어디서
0
9
1
퍼플렉시티 최소 결제단위 50달러로 바뀐 것 같습니다.
0
29
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
34
2
claude plugin 방법 자세히 부탁드려요
0
33
2
transform-style: preserve-3d; 를 추가하면
0
47
1
Babel의 사용법 아래 링크의 영상이 비공개 동영상이라고 뜹니다.
0
115
1
페이지 클래스리스트 제거 해줬을때
0
91
0
페이지를 클릭할 때 Uncaught TypeError: Cannot read properties of undefined (reading 'contains') 에러가 뜹니다.
0
1044
1
질문 있습니다ㅠ.ㅠ..
0
409
1
클릭 시 자꾸 page element만 인식됩니다.
0
239
1
가운데 페이지만 줌인이 됩니다
0
267
1
body에 perspective를 주면 갑자기 html과 body 높이가 0이 됩니다
0
401
1
줌인 상태일 때
0
265
1
이벤트 위임 방식 질문
0
228
1
이사람 누군지 아세요..?
3
420
1
선생님 질문있습니다 이 강의를 리액트환경에서 적용하고싶은데요,
0
288
1
질문있습니다.
0
210
1
선생님 질문잇습니다. ㅠ
0
270
1
질문이 있어요
1
248
1
질문 있습니다.
0
374
2
선생님 질문 있습니다!
1
268
2
쌤 화면 크기 줄엿을때 글자들 삐져나오는거는 어떻게 해결하죠?
0
395
2
소스코드 압축이 풀리지 않습니다.
0
340
4





