21.03.22 16:21 작성
·
204
0
안녕하세요.
혹시 처음 페이지 로드 시 가운데에 캐릭터가 있는 상태로 코드를 변경 하려고 한다면 어떤 부분들을 수정해야 되는지 알고 싶습니다.
답변 3
1
2021. 03. 28. 21:01
원래 코드는 클릭을 해야 캐릭터가 생성되지만, 그냥 페이지가 열렸을 때 자동으로 캐릭터가 생성되는 것을 원하시면 아래와 같이 페이지가 열릴 때 new Character()를 한번 호출하면서 xPos에 원하시는 위치를 지정해주시면 됩니다.
// code..
resizeHandler();
// 이렇게 호출 해주세요
// 브라우저 창 폭의 45%위치 정도로 잡았습니다
new Character({
xPos: 45,
speed: Math.random() * 0.5 + 0.2
});
})();
0
2021. 03. 22. 17:38
index.html에 캐릭터 코드를 살렸구요.
wall3d.js
(function () {
const stageElem = document.querySelector('.stage');
const houseElem = document.querySelector('.house');
const barElem = document.querySelector('.progress-bar');
// const selectCharacterElem = document.querySelector('.select-character');
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)';
// progress bar
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;
stageElem.style.transform = 'rotateX(' + (mousePos.y * 5) + 'deg) rotateY(' + (mousePos.x * 5) + 'deg)';
});
window.addEventListener('resize', resizeHandler);
resizeHandler();
})();
character.js
(function () {
const mainElem = document.querySelector('.character');
init();
function init() {
let scrollState = false;
let lastScrollTop = 0;
let xPos = 0;
let speed = 0.3;
let runningState = false;
let direction;
let rafId;
window.addEventListener('scroll', function () {
clearTimeout(this.scrollState);
if (!scrollState) {
mainElem.classList.add('running');
}
scrollState = setTimeout(function () {
scrollState = false;
mainElem.classList.remove('running');
}, 200);
// 이전 스크롤 위치와 현재 스크롤 위치를 비교
if (this.lastScrollTop > pageYOffset) {
// 이전 스크롤 위치가 크다면: 스크롤 올림
mainElem.setAttribute('data-direction', 'backward');
} else {
// 현재 스크롤 위치가 크다면: 스크롤 내림
mainElem.setAttribute('data-direction', 'forward');
}
this.lastScrollTop = pageYOffset;
});
window.addEventListener('keydown', function (e) {
if (runningState) return;
if (e.keyCode == 37) {
// 왼쪽
this.direction = 'left';
mainElem.setAttribute('data-direction', 'left');
mainElem.classList.add('running');
run(self);
this.runningState = true;
} else if (e.keyCode == 39) {
// 오른쪽
this.direction = 'right';
mainElem.setAttribute('data-direction', 'right');
mainElem.classList.add('running');
run(self);
this.runningState = true;
}
});
window.addEventListener('keyup', function (e) {
mainElem.classList.remove('running');
cancelAnimationFrame(this.rafId);
this.runningState = false;
});
}
function run(self) {
if (this.direction == 'left') {
this.xPos -= this.speed;
} else if (this.direction == 'right') {
this.xPos += this.speed;
}
if (this.xPos < 2) {
this.xPos = 2;
}
if (this.xPos > 88) {
this.xPos = 88;
}
mainElem.style.left = this.xPos + '%';
this.rafId = requestAnimationFrame(function () {
run(self);
});
}
})();
이런 식으로 작업 해 보고 있는데..
제대로 하고 있는 건지 잘 모르겠습니다. ㅜㅜ
0
2021. 03. 22. 17:14
조금 더 디테일 하게 말씀 드리면 페이지 로드시 아래 가운데에 캐릭터가 있는 상태로 시작 하고 싶습니다. 헌데 생성자 함수로 되어있는 부분을 일반 함수로 변경하는 로직이 어떻게 되는지 잘 모르겠습니다 OTL