변수에 대한 설명

감사합니다!😭🙏

<style> 태그 위치

넵! 감사합니다🙏

강사님 구름 이미지

감사합니다!!🙏

패럴렉스

감사합니다!

강사님 구름 이미지

(사진)(사진) 강사님 죄송하지만, 어디서 다운로드를 해야할 지 모르겠습니다 ㅠㅠ 구름 이미지 외에도 뒤에 브런치 형식으로 작성한 패럴렉스 페이지도 영상보면서 처음부터 코드 따라 치면 되는건가요?

case 3 마지막 if 문

아 두번째 조건문과 세번째 조건문 내용이 다르다는건 이해했습니다 선생님:-) 저는 그냥 혹시 제가 댓글로 작성한 코드처럼 두번째 if 문 안에 세번째 if문이 작성되면 문제가 생기는 지가 궁금해가지구요ㅎㅎ case3 경우에는 순서가 순차적으로 이루어져있어서 if문 속에 if문을 넣어서 진행하는게 가능하다고 생각을 했습니닷.... 두번째 if문에서 values.canvas_scale[2].end 값을 지정해주니, 두번째 if 함수 안에서 세번째 if절을 만들면 세번째 조건문에는 scrollRatio > values.canvas_scale[2].end 이렇게만 적어줘도 실행이 되는 것 같아보여서요:) if (scrollRatio > values.canvas_scale[2].end) { //console.log('스크롤시작') objs.canvas.classList.remove('sticky'); objs.canvas.style.marginTop = `${scrollHeight * 0.4}px`; }

case 3 마지막 if 문

//캔버스가 브라우저 상단에 닿지 않았다면 if (scrollRatio values.blendHeight[2].end) { //console.log('축소 시작!') values.canvas_scale[0] = canvasScaleRatio; values.canvas_scale[1] = document.body.offsetWidth / (1.5 * objs.canvas.width); values.canvas_scale[2].start = values.blendHeight[2].end; values.canvas_scale[2].end = values.canvas_scale[2].start + 0.2; objs.canvas.style.transform = `scale(${calcValues(values.canvas_scale, currentYOffset)})`; objs.canvas.style.marginTop = 0; if (scrollRatio > values.canvas_scale[2].end) { //console.log('스크롤시작') objs.canvas.classList.remove('sticky'); objs.canvas.style.marginTop = `${scrollHeight * 0.4}px`; } } //if (scrollRatio > values.canvas_scale[2].end // && values.canvas_scale[2].end > 0) { // console.log('스크롤시작'); // objs.canvas.classList.remove('sticky'); // objs.canvas.style.marginTop = `${scrollHeight * 0.4}px`; //} }

키다운-업 연속 시 캐릭터에 .running class

넵! 감사합니다. keypress로 해보겠습니다. 강사님 하나만 더 여쭤볼게 있는데요. 원래 키다운 이벤트는 ← → 두 키만 window.addEventListener('keydown', ...)적용하고, 위 아래 키다운은 스크롤 이벤트에 같이 포함되어 적용되는거 맞지요? 왼쪽 오른쪽은 키다운이벤트에 문제가 없는데, 위아래만 계속 오류가 나서요 ㅠㅠ

키다운-업 연속 시 캐릭터에 .running class

제가 크롬이랑 웨일 브라우저에서 테스트 진행 중인데, 제 브라우저 환경이 이상한건지 강사님 파일 그대로 내려받아서 [index.html] 실행해도 키-업, 키-다운 이벤트(앞서 말씀드린 것과 같은) 오류가 발생합니다ㅠㅠㅠ

키다운-업 연속 시 캐릭터에 .running class

Character.js 파일 드립니다. //생성자 함수 function Character(info) { this.mainElem = document.createElement('div'); this.mainElem.classList.add('character'); this.mainElem.innerHTML = '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + ''; document.querySelector('.stage').appendChild(this.mainElem); //console.log(info.xPos); this.mainElem.style.left = info.xPos + '%'; this.scrollState = false; //스크롤 중인지 아닌지 this.lastScrollTop = 0; //바로 이전(마지막) 스크롤 위치 this.xPos = info.xPos; this.speed = info.speed; this.direction; this.runningState = false; //좌우 이동중인지 this.rafId; this.init(); }; Character.prototype = { constructer : Character, init : function () { //init함수 다시 공부하기 const self = this; window.addEventListener('scroll', function () { clearTimeout(self.scrollState); if (!self.scrollState) { self.mainElem.classList.add('running'); //console.log('running!') } self.scrollState = setTimeout(function () { self.scrollState = false; self.mainElem.classList.remove('running'); }, 500); //console.log(self.lastScrollTop + '!'); //console.log(pageYOffset); //이전 스크롤 위치와 현재 스크롤 위치를 비교 if (self.lastScrollTop > pageYOffset) { //이전 스크롤 위치가 크다면: 스크롤 올림 self.mainElem.setAttribute('data-direction', 'backward'); } else { //현재 스크롤 위치가 크다면: 스크롤 내림 self.mainElem.setAttribute('data-direction', 'forward'); } self.lastScrollTop = pageYOffset; }); window.addEventListener('keydown', function (e) { //키다운이 반복실행되어 캐릭터가 가속되는 것을 방지하기 위해 if (self.runningState) return; console.log(self.runningState); //console.log('키다운'); if (e.keyCode == 37) { //왼쪽 self.direction = 'left'; self.mainElem.setAttribute('data-direction', 'left'); self.mainElem.classList.add('running'); self.run(self); self.runningState = true; console.log(self.runningState); //**기존** //속도라는 변수를 만들어서 xPos의 %값을 키보드를 누를 때마다 속도만큼 반영시킴 // self.xPos -= self.speed; //현재 좌표를 다시 대입 // self.mainElem.style.left = self.xPos + '%'; } else if (e.keyCode == 39) { //오른쪽 self.direction = 'right'; self.mainElem.setAttribute('data-direction', 'right'); self.mainElem.classList.add('running'); self.run(self); self.runningState = true; console.log(self.runningState); } }); window.addEventListener('keyup', function (e) { self.mainElem.classList.remove('running'); cancelAnimationFrame(self.rafId); self.runningState = false; console.log(self.runningState); }); }, //requestAnimationFrame : 바로 키다운 이벤트에 함수를 넣으니, 캐릭터가 뚝뚝 끊기면서 이동하는 오류가 있어서 사용 //해결방법 run : function (self) { if (self.direction == 'left') { self.xPos -= self.speed; } else if (self.direction == 'right') { self.xPos += self.speed; } if (self.xPos 88) { self.xPos = 88; } self.mainElem.style.left = self.xPos + '%'; self.rafId = requestAnimationFrame(function () { self.run(self); }); } };