22%
59,400원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결애플 웹사이트 인터랙션 클론!
이미지말고 비디오로
마지막 캔버스에서 이미지가 총 두개 들어가는데동영상하나 이미지하나 이렇게 넣으려면 어떻게 해야하는지... 너무 헷갈립니다.
- 미해결애플 웹사이트 인터랙션 클론!
두번째 캔버스때 이미지말고 그라데이션
안녕하십니까!! 다름이아니라 첫번째캔버스가 닿고 나서 fixed로 고정된후두번째캔버스가 나올때 이미지가 아니라 그냥 서서히 그라데이션만 주고싶은데 어떻게 해야할지 도무지 감이 안잡혀서요...스크롤 내릴때 그라데이션이 번지는(?) 듯한 느낌을 주고싶은데어떻게 해야할까요..
- 미해결애플 웹사이트 인터랙션 클론!
playAnimation 과 calcValues 의 용도
안녕하세요~수강생입니다.강의 정말 잘 듣고 있습니다.좋은 강의 감사합니다!질문이 한가지가 있습니다.playAnimation에서 사용하는 scrollRatio if문이 궁금합니다.values 세번째 값으로 start, end 를 지정해주었는데,if문으로 스크롤 지점 체크를 왜 하는지 궁금합니다.이미 start, end 지점을 지정한 것이 아닌가요?예를 들면..0번씬의 메세지A의 데이터는 messageAOpacityIn: [0, 1, { start: 0.1, end: 0.2 }] 인데,start: 0.1 , end: 0.2가 이미 지정된 것이 아닌가요?..switch 문에서현재 화면에서의 스크롤 지점이 0.25와 같거나 작으면메세지A에 opacity와 transform을 그때 적용하는지 궁금합니다.start: 0.1에 적용하는 게 아닌가요?이게 올바른 질문인지는 모르겠습니다.빠른 시간 내에 머리에 지식을 집어넣으려니 어렵네요ㅜㅜ답변 부탁드립니다.감사합니다!
- 미해결애플 웹사이트 인터랙션 클론!
이 부분이 왜 오류가 뜨는지 모르겠어요
여기서 부터 막혔어요 ㅠㅠ 그리는 부분을 loop에 넣으면 계속 오류가 떠요
- 해결됨애플 웹사이트 인터랙션 클론!
messageA_opacity_out 글자가 사라지지 않는 문제
강사님 안녕하세요. 특정 타이밍 스크롤 애니메이션 적용하기 2번째 시간 transform 적용하기 전까지 들었습니다. (13분쯤 ) opacity: 1;로 글자가 점점 나타나는 부분까지는 했는데 글자가 사라지지 않아 console 로 messageA_opacity_out을 찍어봤습니다. console 창에서는 messageA_opacity_out 숫자가 제대로 줄어드는데 글자는 사라지지가 않습니다. 앞뒤로 강의를 돌려서 반복해서 다시 들었으나 문제점을 찾지 못하여 질문을 드립니다. 답변해주시면 감사합니다! https://florentine-trombone-82f.notion.site/0398c6579ce64b948fae207605e623ad 따로 파일을 올릴 수 없어 페이지에 올려둡니다
- 미해결애플 웹사이트 인터랙션 클론!
캔버스 이미지가 꽉차지 않은 이유는 무엇일까요 ㅜㅜ?
http://skin-skin3.musicus.cafe24.com/product/b-free.html 제가 만든 사이트에 지금 캔버스 사이즈가 width=1920인데 이미지가 꽉차지 않은 이유가 뭘까요 ㅜㅜ? 이미지 사이즈도 1920인데 스크롤을 내릴 시에 이미지가 꽉차지 않고 양 옆에 공백이 생기는 이유는 무엇일까요 ㅜㅜ?
- 미해결애플 웹사이트 인터랙션 클론!
강의 소스코드 공유
안녕하세요 강의 잘듣고 있습니다. 강의에서 쓰인 코드를 제 프로젝트에 맞게 일부 고쳐서 깃에 공유해도 될까요?? 출처는 남기지만 코드 자체가 공유될 수 있을 것 같아 문의드립니다. 감사합니다.
- 미해결애플 웹사이트 인터랙션 클론!
답변이 너무 느립니다.
강사님께 부탁드립니다. 하단에 올라온 질문들 답변해주시면 감사드리겠습니다.
- 미해결애플 웹사이트 인터랙션 클론!
캔버스 비율 조정
혹시 캔버스 비율 조정하는거를 스크립트를 사용안하고 .sticky-elem-canvas > canvas { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100vh; } 이렇게 height로 100vh해도 비율이 맞춰지는데 이렇게 사용해도 무리없을까요?
- 미해결애플 웹사이트 인터랙션 클론!
overflow-x:hidden을 사용했는데, 모바일 화면에서 우측이 잘리고 가로 스크롤이
d위 이미지처럼 가로 스크롤이 생기는 데 overflow-x: hidden 기능이 적용되지 않아서 생기는 문제일까요?
- 미해결애플 웹사이트 인터랙션 클론!
파일을 다운로드 받았는데 언더바가 포함된 이상한 파일들이 보입니다
이 파일들 모죠? 바이너리 파일로 되어있고... 일일히 다 지우고 있는데 예제를 아무리 받아서 압축해제하면 이상한 언더바 파일들이 엄청 많이있네요 ㅠ 그냥 지우고 진행하면 되겠죠?!
- 미해결애플 웹사이트 인터랙션 클론!
폰트사이즈에 왜 미디어쿼리를 지정하나요?
일분코딩님이 두꺼운 글씨를 화면마다 표현하기 위해서 1000픽셀 이하는 em을, 1000픽셀 이상은 vw를 사용하셨습니다. 특정 화면 크기에 따라서 색을 바꾼다던지, 요소를 감춘다던지와 같은 효과는 미디어쿼리를 사용하는게 이해가 됩니다. 다만 폰트사이즈 같은 경우에는 처음부터 vw, vh를 사용해 반응형으로 만들 수 있는데에도 미디어쿼리를 사용하는데에 직접적인 이유가 있는지 궁금합니다
- 미해결애플 웹사이트 인터랙션 클론!
완성 파일이 강의처럼 안나오네요
섹션3 부분 강의 따라하는데 도저히 강의처럼 안나와서 한 이틀정도를 나름 코드를 변경했는데도 안되길래.. 강의파일에 혹시 잘못 덮어씌웠나 해서 강의파일 다시 다운받아서 해보니까 애초에 안되네요.. 환경은 윈도우10, 크롬이고 2560*1440입니다. VSCODE 라이브서버로 실행시켰습니다. 물론 창크기 어떤식으로 해도 섹션 3가 위에 미드텍스트를 캔버스가 가리고, 캔버스 애니메이션 시작 시점도 다르게 나옵니다. 혹시 제 컴퓨터 환경이 이상한건지 아니면 뭐 호환사항이 변견된건지.. 궁금합니다.
- 미해결애플 웹사이트 인터랙션 클론!
안녕하세요! 질문있습니다
페이지 전체에 smooth한 scroll을 적용하고 싶은데 해당 강의 보면서 requestAnimationFrame으로 그것이 가능할 수 있을까 생각이 되긴 하는데 어떻게 구현해야 할지 잘 모르겠어서요 ㅜㅜ 물론 기존 강의처럼 calcValues로 애니메이션 구현하는 섹션도 있습니다! 이게 아니라면 다른 방법이나 라이브러리를 추천해 주실 수 있으실까요? ( vanila로 된 라이브러리를 하나 찾았으나 기기별로 속도 적용하기가 좀 까다롭거나, 트랙패드와 마우스 휠의 속도차이가 난다거나.. 하던 이슈가 좀 있었어요물론 제가 잘 사용하지 못해서 그런 것 같습니다 ㅜㅜ ) 아! 그리구 네비게이션 클릭시 특정 영역으로 갈 때 속도 조절 하는 방법도 궁금합니다 (예를 들면 jquery animate처럼요) 한번에 많은 질문해서 죄송해요 ㅜㅜ
- 미해결애플 웹사이트 인터랙션 클론!
스크롤이 적용이 안되는것같아요!ㅜㅜ
스크롤도 늘어나질 않고 스티키도 안보이고 씬도 변하질 않고 계속 0에 있어요ㅜㅜ 첨부하겠습니당 const main = () => { let y0ffset = 0; const sceneInfo = [ { //0 type: 'sticky', heightNum: 5, //브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-0') } }, { //1 type: 'normal', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-1') } }, { //2 type: 'sticky', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-2') } }, { //3 type: 'sticky', heightNum: 5, 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() { } window.addEventListener('resize',setLayout); window.addEventListener('scroll',() => { y0ffset = window.pageXOffset; scrollLoop(); }); setLayout(); }; main();
- 미해결애플 웹사이트 인터랙션 클론!
선생님 질문있습니다
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 강의 잘듣고있습니다 완벽히 이해는 하지 못하고 여러번 들을려고 하고 있습니다 다름이 아니라 스크롤 내릴때 이미지 슬라이드가 되고 영역이 끝나면 내려가는거를 구현을 하려고 하는데 section 높이는 알겠는데 이미지 슬라이드 가로 넓이를 어떻게 구해야할지 잘모르겠습니다 (넓이 - 현재 스크롤위치) 이렇게 해야할거같은데 힌트라도 얻을 수 있을가요?
- 미해결애플 웹사이트 인터랙션 클론!
기존 코드를 저에게 맞춰 바꾸는 중 버그..
안녕하십니까. 좋은 강의 감사드립니다. 다름이 아니라 기존의 코드를 제가 임의로 바꿔서 스스로 코딩을 하고 있는데 지속적으로 같은 버그가 발생하여 원인이 무엇인지 궁금하여 질문 올립니다. 현재 제가 바꾼 내용은 글씨체를 구글 폰트에서 받아 html상에서 추가하고 css상에서 fontfamily에 추가를 하였습니다. 또한 main2.html에서 마지막 추가된 <p> 태그에 onclick을 추가하였습니다. 이때 지속적으로 폰트의 시작 위치가 중심보다 내려가있고 이미지 2개가 겹쳐지는 scroll section3에서 사진이 부자연스럽게 나타나고 없어지는 버그가 발생합니다... 혹시 어느 부분이 의심스러운지 여쭤봐도 될까요..?
- 미해결애플 웹사이트 인터랙션 클론!
강의 자료가 이상해요.
저도 수업을 듣다가 조금 이상해서요 ㅎㅎ 아래 질문글에 답변다신 것 보아 수업자료가 덮어씌우기 되어버린 것인지 답변다신 것대로 업데이트가 아직 안 된 것 같아요. 다음 수강생들을 위해 부탁드려요 선생님~
- 미해결애플 웹사이트 인터랙션 클론!
각 scene의 컨텐츠 증가 또는 감소에서의 show-scene 반응
function setLayout() { // 각 스크롤 섹션의 높이 세팅 for (let i = 0; i < sceneInfo.length; i++) { if (sceneInfo[i].type === 'sticky') { sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; } else if (sceneInfo[i].type === 'normal') { sceneInfo[i].scrollHeight = sceneInfo[i].objs.content.offsetHeight + window.innerHeight * 0.5; } sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`; } yOffset = window.pageYOffset; let totalScrollHeight = 0; for (let i = 0; i < sceneInfo.length; i++) { totalScrollHeight += sceneInfo[i].scrollHeight; if (totalScrollHeight >= yOffset) { currentScene = i; break; } } document.body.setAttribute('id', `show-scene-${currentScene}`); 여기서 컨텐츠 증가 또는 해당하는 섹션에서만 동작하게 하고싶은데 아무리 수정해봐도 잘 모르겠습니다. 몇가지 씬을 지워버리면 아예 동작을하지 않는 현상도 있구요 * 궁금한사항은 scroll-section-0이 중간쯤 있을때, show-scene-0 을 추가하고 다시 올라갔을때 없애고 싶습니다.
- 미해결애플 웹사이트 인터랙션 클론!
getBoundingClientRect관련 질문입니다.
현재 스크롤 값이 발생할 때의 높이를 잘 못 잡는 문제가 발생해서 getBoundingClientRect가 오차가 발생한다고 하셨는데 그럼 처음에 setLayout에서 잡을 수 없나요??