25%
57,750원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결애플 웹사이트 인터랙션 클론!
주제에 좀 벗어난 질문 같지만 답답해서 문의 좀 드립니다~^^;
자바스크립트를 잘 몰라 문의 드려봅니다! playAnimation() 함수안의 calcValues(values.messageA_opacity,currentYOffset); 라인의 currentYOffset는 이렇게 값을 넣어 calcValues()에 넘기는데요. calcValues() 함수안의 let scrollRatio = currentYOffset / sceneInfo[currentScene].scrollHeight; currentScene은 보내지도 않았는데 어디서 어떻게 값을 받아서 사용할수있는건가요? function calcValues(values,currentYOffset){ let rv; //현재 씬 (스크롤섹션)에서 스크롤된 범위를 구하기 //현 재씬에서 스크롤된 값 / let scrollRatio = currentYOffset / sceneInfo[currentScene].scrollHeight; ///////////////////////////////////////////////////////////////////////////////////////////////// console.log('currentYOffset: '+currentYOffset);//현재 씬에서 스크롤된 높이 //////////////////////////////////////////////////////////////////////////////////////////////// } function playAnimation(){ const objs = sceneInfo[currentScene].objs; const values = sceneInfo[currentScene].values; const currentYOffset = yOffset-prevScrollHeight;//현재 씬에서 스크롤된 높이=전체 씬에서 스크롤된 높이-이전 섹션의 높이의 합 //console.log('currentYOffset: '+currentYOffset);//현재 씬에서 스크롤된 높이 //console.log('yOffset: '+yOffset);//전체 씬에서 스크롤된 높이 //console.log('prevScrollHeight: '+prevScrollHeight);//이전 섹션의 높이 switch (currentScene){ case 0: //console.log('0 play'); let mesageA_opacity_0 = values.messageA_opacity[0]; let mesageA_opacity_1 = values.messageA_opacity[1]; //console.log("currentYOffset: "+currentYOffset); ///////////////////////////////////////////////////////////////////////////////////////// calcValues(values.messageA_opacity,currentYOffset); ///////////////////////////////////////////////////////////////////////////////////////// break; case 1: calcValues(values.messageA_opacity,currentYOffset); //console.log(currentScene, currentYOffset); break; case 2: console.log(currentScene, currentYOffset); break; case 3: console.log(currentScene, currentYOffset); break; } }
- 미해결애플 웹사이트 인터랙션 클론!
let enterNewScene=false; 부분 문의 드립니다.
let enterNewScene=false; 부분 문의 드립니다. let enterNewScene=false; 를 scrollLoop() 밖에 적고 다시 scrollLoop() 내에도 아래처럼 적는데요. function scrollLoop(){ enterNewScene=false; 이걸 밖에 let enterNewScene=false; 를 생략하고 scrollLoop() 내에 function scrollLoop(){ let enterNewScene=false; 라고만 하는것과 차이가있나요?
- 미해결애플 웹사이트 인터랙션 클론!
캔버스 사이즈에 맞춰 가정한 innerHeight와 innerWidth에서요 ㅠ__ㅠ
왜 window.innerHeight / canvasScaleRatio; 이렇게 연산이 되어야 하는지 이해가 안가는데 ㅠㅠ 좀더 자세한 설명 해주실수있을까요..? 지금까지 값*비율 이런식으로 계산되어오던(곱셈) 연산은 잘따라오고있었는데 가로값을 비율로 다시 또 나눈다고 하니깐 잘이해가 가질않아서요 ㅠㅠ 근데 또 원하는 값은 나오니깐 어떻게 저렇게 원리가 되는지 다른방식으로 한번더 설명해주시면 잘이해해보겠습니다 ㅠㅠ
- 해결됨애플 웹사이트 인터랙션 클론!
undefined ..?
삭제된 글입니다
- 미해결애플 웹사이트 인터랙션 클론!
calcValues function 에서 start, end 질문 있습니다.
switch case break 를 이용해 sceneInfo 의 값들을 불러와 에니메이션이 이루어지는데요. 이 start end 값을 scenInfo에서 불러오지 않고 playanimation 안에서 바로 정의 할 수 있는 방법은 없을까요? 목적 : scrollRatio 0 ~ 0.3 사이에서만 opacity 애니메이션이 작동. 추후에 0.3 은 element.offsetHeight 대체 해 볼 생각입니다. ex> opacity_in: [0, 1] // start , end 값을 playanimation function 안에서 정의. if(scrollRatio > 0 && scrollRatio < 0.3 ) objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, 0.3);
- 애플 웹사이트 인터랙션 클론!
switch(currentScene) 질문 드립니다 ㅠㅠ
삭제된 글입니다
- 미해결애플 웹사이트 인터랙션 클론!
scrollheight
저는 왜3990이 아니라 4060으로뜨는지요?... 이게 사람마다 다를수있는건가요?...
- 미해결애플 웹사이트 인터랙션 클론!
선생님 폰으로 보는 방법에 대해 질문있습니다!
선생님 안녕하세요 수업 잘듣고있습니다! 제가 아직 이쪽으로는 초보라서 그런데,, 혹시 웹으로 제작한걸 선생님처럼 폰으로 보려면 어떻게 해야 하는지 알수 있을까요??
- 미해결애플 웹사이트 인터랙션 클론!
1분이 이미지 뒤에 글자 남는 현상
강의를 보면서 공부하다보니 저렇게 글씨가 남아있어서 제것만 그런가 싶어서 제공해주신 최근 소스코드로 확인해보니 같은 현상이 생기고 있어서 뭐가 문제인지 모르겠네요ㅠㅠ 스크롤을 처음내렸을때는 괜찮은데 글자부분까지 내렸다가 다시 올리니 저렇게 남아있는 경우가 있네요ㅠㅠ 원인 한번 찾아주시면 감사하겠습니다ㅠㅠ
- 미해결애플 웹사이트 인터랙션 클론!
인터랙티브 관련 책 추천 부탁드립니다.
인터랙티브한 자바스크립트를 짜다보면 좀더 자연스러운 움직임, 쳬계적인 수식을 위해 자바스크립트 이론이 아닌 다른 공부를 해야 될거 같은데 감이 오지 않아 이렇게 질문 남깁니다. 수학/물리에 대한 책을 봐야 될거 같긴한데.. 혹시 추천해주실 책이 있을까요?
- 미해결애플 웹사이트 인터랙션 클론!
웹에서 속도
강사님 잘 가르쳐주셔서 너무 감사합니다 :) html, css,js만 이용해서 간단한 랜딩페이지를 웹에서 작동시켜 보려 합니다. 현재 AWS EC2 서버에 올려서 작동을 시켜봤는데, 로딩이 되는데 애플 페이지 보다 시간이 조금 많이 걸리네요 ㅠㅠ 카카오톡 발송을 통한 링크 화면에서는 처음에 동영상 세팅 부분이 조금 맞지 않는 환경도 있구요 .. 혹시 이 부분과 관련해서 어떤 점을 보완하면 속도가 빨라질지 애플처럼 바로 화면에 뜨게 할 수 있을지, 카카오톡 연결되는 브라우저 상에서는 css처리를 어떻게 하면 좋을지 궁금합니다! 참고해서 사이트를 더 좋게 개선해보고 싶네요!
- 미해결애플 웹사이트 인터랙션 클론!
.context('2d') 사용
canvas: document.querySelector("#video_canvas-0"), context: canvas.getContext('2d'), 이렇게 쓰면 script가 제대로 작동이 안되는데 canvas: document.querySelector("#video_canvas-0"), context: document.querySelector("#video_canvas-0").getContext('2d'), 이렇게 써야하는 이유가 궁금합니다.
- 해결됨애플 웹사이트 인터랙션 클론!
오류가 나는데 뭐가 문제인지 모르겠어요ㅠㅠ
(() => { let yOffset = 0; // window.pageYOffset 대신 쓸 변수 let prevScrollHeight = 0; // 현재 스크롤 위치(yOffset)보다 이전에 위치한 스크롤 섹션들의 스크롤 높이값의 합 let currentScene = 0; // 현재 활성화된(눈 앞에 보고있는) 씬(scroll-section) const sceneInfo = [ { // 0 type: 'sticky', heightNum: 5, //브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-0') } }, { // 1 type: 'normal', heightNum: 5, //브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-1') } }, { // 2 type: 'sticky', heightNum: 5, //브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-2') } }, { // 3 type: 'sticky', heightNum: 5, //브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-3') } } ]; function setLayout() { // 각 스크롤 섹션의 높이 세팅 for (let i = 0; i < sceneInfo.length; i++){ sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`; } //console.log(sceneInfo); } function scrollLoop() { for (let i = 0; i < currentScene; i++) { prevScrollHeight += sceneInfo[i].scrollHeight; } //console.log(prevScrollHeight); if (yOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight) { currentScene++; } if (yOffset < prevScrollHeight) { currentScene--; } console.log(currentScene); } window.addEventListener('resize', setLayout); window.addEventListener('scroll', () => { yOffset = window.pageYOffset; scrollLoop(); }); setLayout(); })();
- 미해결애플 웹사이트 인터랙션 클론!
강의등록만해놓고진도가안나가네요(@^^@)
열심히 해야하는데... 업무핑계로 계속 미루고있네요 ㅠㅠ 강의는 초반만 조금 봤는데... 디테일하게 알려주셔서 너무 좋더라구요... 다음강의도 좀더 좋은 컨텐츠로 부탁드립니다.
- 미해결애플 웹사이트 인터랙션 클론!
css 관련
안녕하세요. 좋은 강의 잘 보고 있습니다. 많이 배우고 있어요 ! :) 그런데 .desc-message가 제대로 적용되려면 sticky-elem 뒤로 순서를 바꾸거나 클래스 추가 수정이 필요할 것 같습니다. 감사합니다.
- 해결됨애플 웹사이트 인터랙션 클론!
pin이 들어있는 DIV가 이상하게 작동해서 질문드립니다.
https://zealous-tesla-834d28.netlify.app/ 세시간 정도 들여다봤는데... 제가 어디가 잘못된 건지 잘 못찾겠어서 답답한 마음에 질문을 드립니다. pin이 들어간 영역에서 스크롤을 내리면 desc의 height가 같이 줄어들었다가 늘어나야하는데 PIN만 줄어들었다가 늘어나네요 ㅜㅜ 그리고 스크롤을 내렸을 때도 움직임이 부자연스러워서... 어디를 손봐야할지 모르겠네요.
- 미해결애플 웹사이트 인터랙션 클론!
푸터 문제
7:45까지 똑같이 따라했는데 footer인 주황색 박스가 상하좌우로 공간이 생겨요. 선생님껀 푸터 양옆이 꽉차있는데 제껀 왜이러죠??
- 미해결애플 웹사이트 인터랙션 클론!
innerWidth에 대해 / 캔버스 드로우 애니메이션 1 강의부분
늘 강의 감사히 듣고있습니다. 캔버스 드로우 애니메이션1 에 21:33 부분에서 innerWidth가 스크롤바를 포함한다고 하신부분이 검색해보니 innerWidth는 스크롤바를 포함하지않는크기라고 나오더라구요 https://webclub.tistory.com/105 제가 잘못알고있는걸까요?; 중복질문이면 죄송합니다.
- 미해결애플 웹사이트 인터랙션 클론!
playanimation 관련 질문드립니다.
안녕하세요. 강사님 강의 잘 듣고 있습니다. 현재 쇼핑몰을 제작 중인데 에어팟 프로 상세페이지를 보고 잘 만들었다는 생각을 많이 했습니다. 그러다 강사님 강의를 알게 되었고 이렇게 배울 수 있는 기회를 주셔서 감사합니다. 강의는 전체적으로 한번 듣고 다시 한 강의씩 들으면서 페이지 제작 중에 있는데 문제가 있어 이렇게 질문을 남깁니다. 일단 저는 아임웹을 이용해서 홈페이지를 만드는 중이고 '현재 활성씬 반영하기'까지 완료하고 콘솔창을 통해 제대로 작동하는 것까지 확인했습니다. 헌데 playanimation 함수를 통해 case들을 작성하고 잘 작동하는지 console.log콘솔창에 띄어보려고 해도 아무런 반응이 없습니다. 빨간색으로 어떤 에러도 표시가 안되어서 일단 무시하고 다음 내용들을 작성하여도 콘솔창에 모두 반응이 없습니다. console.log('0' play); console.log('1' play);console.log('2' play);console.log('3' play); console.log(messageA_opacity_0, messageA_opacity_1); 아임웹 특성상 코드위젯창을 통해 html, css, 자바 파일들을 한꺼번에 작성하고 있고, 또한 내비쪽은 아임웹쪽에서 이미 자체적으로 구성이 되어 있기 때문에 내비들은 제외하고 작성하고 있는데 이 과정에서 혹시 문제가 발생했을 수도 있는지 아니면 어떤 문제때문인지 알려주시면 감사하겠습니다! function playAnimation() { switch (currentScene) { case 0: console.log('0 play'); break; case 1: console.log('1 play'); break; case 2: console.log('2 play'); break; case 3: console.log('3 play'); break; } }
- 해결됨애플 웹사이트 인터랙션 클론!
비디오 촬영 관련 질문
안녕하세요. 강의를 너무 재미있게 듣고 있습니다. 강의의 질이 너무 좋아서 평소에 HTML이나 CSS에 대한 공부 부담도 있었는데 그런 부분까지 커버하는 강의 같네요 ㅠㅠ 너무 좋아요. 제 질문은 비디오 촬영에 관련한 것입니다. 최근에 혼자 동영상까지 만들어보고 싶어 여러가지 알아보던 와중에 어떻게 촬영하셨는지 궁금해서 질문드립니다. 저는 미니스튜디오로 배경을 커버할까 생각중인데, 강사님은 어떻게 뒷배경을 깔끔하게 날리셨는지, 스튜디오 같은 곳을 활용하였는지 궁금합니다. 감사합니다!