top/left 와 bottom/right 쪽 mousemove가... - 인프런

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

})()

인프런 커뮤니티 질문&답변

top/left 와 bottom/right 쪽 mousemove가 잘 안되는거 같아서요. code에 문제가 있는지 한번 봐주시면 감사하겠습니다.