(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+'%';
}
