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

Question

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

LEETY · Answer

으 다 오타 때문이네요 감사해요!

1분코딩 · Answer

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