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

seon님의 프로필 이미지
seon

작성한 질문수

인터랙티브 웹 개발 제대로 시작하기

wall3d.js에서 마우스위치 x,y 값이 안잡히는데 이유를 알수 있을까요? {x: NaN, y: NaN}

해결된 질문

작성

·

349

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(){
        const scrollPer = pageYOffset / maxScrollValue;
        const zMove = scrollPer * 980 - 490;
        houseElem.style.transform = `translateZ(${zMove}vw)`;

        barElem.style.width = scrollPer * 100 + '%';
    });

    window.addEventListener('mousemove', function(e){
        mousePos.x = -1 + (e.ClientX / window.innerWidth* 2;
        mousePos.y = 1 - (e.ClientY / window.innerHeight* 2;
        console.log(mousePos);
    });



    window.addEventListener('resize', resizeHandler);
    resizeHandler();
})();

답변 3

0

seon님의 프로필 이미지
seon
질문자

네 감사합니다~

0

1분코딩님의 프로필 이미지
1분코딩
지식공유자

아 네 ㅎㅎ 공부 화이팅하세요!

0

seon님의 프로필 이미지
seon
질문자

clientX에서 C를 대문자로 써서 그렇네요! 

대문자 실수였습니다~하하

seon님의 프로필 이미지
seon

작성한 질문수

질문하기