1분이가 계속 한자리에만 생기는데요. i... - Inflearn

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

    stageElem.addEventListener('click',function(e){

        // console.log(e.clientX/window.innerWidth*100)
            new Character({//객체의 속성으로 넣어야 함. 다른 것들도 추가해야 하기때문에
                xPos :e.clientX/window.innerWidth*100
            });


    })


})()
function Character(info) {
    this.mainElem = document.createElement('div');
    this.mainElem.classList.add('charactor');
    this.mainElem.innerHTML = '' +
        ' <div class="character" >' +
            ' <div class="character-face-con character-head">' +
                '<div class="character-face character-head-face face-front"></div>' +
                '<div class="character-face character-head-face face-back"></div>' +
            '</div>' +
            ' <div class="character-face-con character-torso">' +
                '<div class="character-face character-torso-face face-front"></div>' +
                '<div class="character-face character-torso-face face-back"></div>' +
            ' </div>' +
            '<div class="character-face-con character-arm character-arm-right">' +
                ' <div class="character-face character-arm-face face-front"></div>' +
                ' <div class="character-face character-arm-face face-back"></div>' +
            '</div>' +
            '  <div class="character-face-con character-arm character-arm-left">' +
                '<div class="character-face character-arm-face face-front"></div>' +
                '<div class="character-face character-arm-face face-back"></div>' +
            '</div>' +
            '  <div class="character-face-con character-leg character-leg-right">' +
                '<div class="character-face character-leg-face face-front"></div>' +
                '<div class="character-face character-leg-face face-back"></div>' +
            '</div>' +
            '  <div class="character-face-con character-leg character-leg-left">' +
                '<div class="character-face character-leg-face face-front"></div>' +
                '<div class="character-face character-leg-face face-back"></div>' +
            '</div>' +
        '</div>';

        document.querySelector('.stage').appendChild(this.mainElem);


        this.mainElem.style.left= info.xPos+'%';
}
Cộng đồng Hỏi & Đáp của Inflearn

1분이가 계속 한자리에만 생기는데요. info.xPos가 일분이에게 안들어가는거 같아요. 놓친부분이 있는거겠죠?
