강의

멘토링

커뮤니티

Cộng đồng Hỏi & Đáp của Inflearn

Hình ảnh hồ sơ của alwaysgood210517
alwaysgood210517

câu hỏi đã được viết

Bắt đầu phát triển web tương tác đúng cách

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

Đã giải quyết

Viết

·

465

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();
})();
javascript인터랙티브-웹HTML/CSS

Câu trả lời 3

0

seon님의 프로필 이미지
seon
Người đặt câu hỏi

네 감사합니다~

0

studiomeal님의 프로필 이미지
studiomeal
Người chia sẻ kiến thức

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

0

seon님의 프로필 이미지
seon
Người đặt câu hỏi

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

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

Hình ảnh hồ sơ của alwaysgood210517
alwaysgood210517

câu hỏi đã được viết

Đặt câu hỏi