Inflearn Community Q&A
asked
top/left 와 bottom/right 쪽 mousemove가 잘 안되는거 같아서요. code에 문제가 있는지 한번 봐주시면 감사하겠습니다.
Resolved
Written on
·
263
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();
})()
인터랙티브-웹HTML/CSSjavascript
Answer 2
0
0
studiomeal
Instructor
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)';