-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
해결됨
top/left 와 bottom/right 쪽 mousemove가 잘 안되는거 같아서요. code에 문제가 있는지 한번 봐주시면 감사하겠습니다.
20.09.09 10:16 작성 조회수 102
0
(function(){//즉시 실행 함수
const stageElem = document.querySelector('.stage');
const houseElem = document.querySelector('.house');
const barElem = document.querySelector('.progress-bar');
const mousePos = {x:0,y:0};
let maxScrollValue;
function resizeHandler(){
maxScrollValue = document.body.offsetHeight - window.innerHeight;
}
window.addEventListener('scroll',function(){
// pageYoffset 스크롤 한 값
// console.log(this.pageYOffset);
// 스크롤 범위 지정하기
// console.log( pageYOffset/maxScrollValue);
const scrollPer = pageYOffset/maxScrollValue
const zMove =scrollPer*970 -490;
houseElem.style.transform = 'translateZ('+zMove+'vw)';
// progress bar
barElem.style.width = scrollPer *100 + '%';
})
window.addEventListener('mousemove',function(e){
// console.log(e.clientX,e.clientY) 마우스 위치 알아내기
mousePos.x = -1+(e.clientX /window.innerWidth)*2;
mousePos.y = 1-(e.clientY /window.innerHeight)*2;
stageElem.style.transform='rotateX('+(mousePos.y*5)+'deg) rotateY('+(mousePos.y*5)+'deg)';
console.log(mousePos);
})
window.addEventListener('resize',resizeHandler)
resizeHandler();
})()
답변을 작성해보세요.
0
0
1분코딩
지식공유자2020.09.10
mousemove 이벤트 핸들러 안에서
stageElem.style.transform='rotateX('+(mousePos.y*5)+'deg) rotateY('+(mousePos.y*5)+'deg)';
rotateY부분에, mousePos.y*5 부분에 y를 x로 바꾸어주세요~
아래처럼 하시면 됩니다.
stageElem.style.transform='rotateX('+(mousePos.y*5)+'deg) rotateY('+(mousePos.x*5)+'deg)';
답변 2