위치 정보 권한 에러

앗 선생님. 해결했습니다 (__)

이벤트 버스와 emit 의 차이

3분 57초 정도 구간에서 이벤트 버스라고 말씀 하시네요~

질문 드립니다.

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 88) { this.xPos = 88; } mainElem.style.left = this.xPos + '%'; this.rafId = requestAnimationFrame(function () { run(self); }); } })(); 이런 식으로 작업 해 보고 있는데.. 제대로 하고 있는 건지 잘 모르겠습니다. ㅜㅜ

질문 드립니다.

조금 더 디테일 하게 말씀 드리면 페이지 로드시 아래 가운데에 캐릭터가 있는 상태로 시작 하고 싶습니다. 헌데 생성자 함수로 되어있는 부분을 일반 함수로 변경하는 로직이 어떻게 되는지 잘 모르겠습니다 OTL

모바일에서 적용하기

솨랑합니다