월 15,400원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결애플 웹사이트 인터랙션 클론!
currentScene이 바뀌기 전에 다음에 나올 sticky-elem 요소가 미리 보여지게끔 하려면 어떻게 해야할까요??
안녕하세요! 꼼꼼하고 재밌는 강의 너무 잘 듣고 있습니다:) 해당 강의를 통해서 회사 서비스 소개 페이지를 제작하고 있습니다. 인터랙티브한 효과 덕에 대표님께 칭찬도 받았네요ㅎ 다 강사님 덕분입니다! 근데 제작 중에 조금 수정하고 싶은 부분이 생겼는데요 강사님이 주신 예제 파일 중 @simple-version/index.html 파일로 예를 들자면 scroll-section-0에서 scroll-section-1로 넘어갈 때 currentScene이 바뀌기 전 이 노란 여백 공간에 보통 스크롤이 되어 지나가는 텍스트 요소를 추가 하고 싶습니다!ㅠ 강의 영상 중 case 3 안에서 그려주었던 캔버스를 case 2 구문 안에 코드를 추가하여 미리 그려놓는 것과 같은 개념으로 텍스트나 이미지가 미리 보여지게끔 하고 싶은데 어떤 식으로 구현을 해야 할까요...? 원하는대로 커스텀 하려니 매우 어렵네요ㅠㅠ 강의와 관련있는 질문을 남겨주세요.• 강의와 관련이 없는 질문은 지식공유자가 답변하지 않을 수 있습니다. (사적 상담, 컨설팅, 과제 풀이 등)• 질문을 남기기 전, 비슷한 내용을 질문한 수강생이 있는지 먼저 검색을 해주세요. (중복 질문을 자제해주세요.)• 서비스 운영 관련 질문은 인프런 우측 하단 ‘문의하기’를 이용해주세요. (영상 재생 문제, 사이트 버그, 강의 환불 등) 질문 전달에도 요령이 필요합니다.• 지식공유자가 질문을 좀 더 쉽게 확인할 수 있게 도와주세요.• 강의실 페이지(/lecture) 에서 '질문하기'를 이용해주시면 질문과 연관된 수업 영상 제목이 함께 등록됩니다.• 강의 대시보드에서 질문을 남길 경우, 관련 섹션 및 수업 제목을 기재해주세요. • 수업 특정 구간에 대한 질문은 꼭 영상 타임코드를 남겨주세요! 구체적인 질문일수록 명확한 답을 받을 수 있어요.• 질문 제목은 핵심 키워드를 포함해 간결하게 적어주세요.• 질문 내용은 자세하게 적어주시되, 지식공유자가 답변할 수 있도록 구체적으로 남겨주세요.• 정확한 질문 내용과 함께 코드를 적어주시거나, 캡쳐 이미지를 첨부하면 더욱 좋습니다. 기본적인 예의를 지켜주세요.• 정중한 의견 및 문의 제시, 감사 인사 등의 커뮤니케이션은 더 나은 강의를 위한 기틀이 됩니다. • 질문이 있을 때에는 강의를 만든 지식공유자에 대한 기본적인 예의를 꼭 지켜주세요. • 반말, 욕설, 과격한 표현 등 지식공유자를 불쾌하게 할 수 있는 내용은 스팸 처리 등 제재를 가할 수 있습니다.
- 해결됨애플 웹사이트 인터랙션 클론!
switch(currentScene) case2번 질문드려요!
쌤 코드 기준으로 질문드려여 :> case 0: 일 경우, 동영상이 밑의 사진처럼 로드시 drawImage 처리를 해줘야 스크롤 처리가 없어도 한번에 뜨는 반면에, case2:일 경우는 동영상이 로드 시의 처리 없이도 바로 뜨는데 이게 왜그런지 궁금하네유
- 미해결애플 웹사이트 인터랙션 클론!
편안한 촉감 부분에서요~~
안녕하세요 ㅎㅎ 강의 잘 듣구 있습니다. 크롬에서 아이폰x사이즈로 해서 테스트해보고 있는데요~ 섹션2에서 첫번째 설명 부분을 보면, <p> 편안한 목넘김을 완성하는 디테일한 여러 구성 요소들, 우리는 이를 하나하나 새롭게 살피고 재구성하는 과정을 거쳐 새로운 수준의 머그, AirMug Pro를 만들었습니다. 입에 뭔가 댔다는 감각은 어느새 사라지고 오롯이 당신과 음료만 남게 되죠. </p> 이 설명 부분이 화면 width를 넘어가버리는 현상이 생깁니다... css 문제인줄 알고 desc-message부분에서 width를 줄여도 마찬가지네요... 데스크탑 모드에서는 잘 작동하는데... 뭐가 문제인걸까요...??
- 미해결애플 웹사이트 인터랙션 클론!
새로고침 했을때 위치를 어떻게 찾아 가는건가요?
어떤 구문 때문에 scene 2 에서 새로 고침을 하면 처음 화면으로 가지 않고 scene 2 로 돌아 오게 되는 건가요?
- 해결됨애플 웹사이트 인터랙션 클론!
1분 코딩님!!! 제가 강의를 듣다가 컵 사진 말고 다른 사진으로 바꿀려고 했더니 이상합니다ㅜㅜ
컵 사진은 잘되는데 제가 제손을 이용해서 60프레임 그리고 사진에 장 수 다 했는데 전체가 아닌 아주 조그만하게 나오더라구요 ㅜㅜㅜ 이상한 위치에서 나오고... 어떠한 방법을 사용해야 되나요?? 사진을 꼭 1920 * 1080 으로 맞춰야 하나요???
- 미해결애플 웹사이트 인터랙션 클론!
두 가지 에러들 해결방법을 모르겠습니다 ㅜ
안녕하세요. 강의 잘 듣고있습니다 ! 그런데 콘솔창에 아래 이미지 처럼 에러가 떠서 질문 드립니다. 스크롤을 내릴때는 뜨지 않다가 전부 다 내리고 다시 올려보면 저렇게 에러가 뜹니다. 작동은 됩니다.. (스크롤 비디오 처리 부분) 혹시 빼먹은게 있나 강의도 여러번 다시 보았는데 해결이 나지 않아서 질문 드립니다 ..ㅜㅜ ----- 그리고 또 한가지가 있는데, show scene1 에서 show scene2로 넘어갈때 아래 이미지가 잠깐 뜨고 사라집니다. 강의에서는 저와 다른 텍스트만 잠깐 뜨고 사라져서 css에서 수정하는것을 보았는데 저의 경우에는 위의 이미지처럼 저 텍스트와 이미지가 잠깐 떴다가 사라져서 이것도 해결책을 잘 모르겠습니다ㅠ 완성본에서는 콘솔창에 에러 뜨는 현상도 전혀 없고 잘 작동 됩니다. 제 코드에 문제가 있는건데 html과 css에는 문제가 없는거 같습니다.. (완성본에 적용해보았습니다) 강의는 두번째 스크롤 비디오 처리까지 들었습니다! ----- 아래는 현재 제 코드입니다. (()=>{ 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'), messageA: document.querySelector('#scroll-section-0 .main-message.a'), messageB: document.querySelector('#scroll-section-0 .main-message.b'), messageC: document.querySelector('#scroll-section-0 .main-message.c'), messageD: document.querySelector('#scroll-section-0 .main-message.d'), canvas: document.querySelector('#video-canvas-0'), context: document.querySelector('#video-canvas-0').getContext('2d'), videoImages: [] }, values: { videoImagesCount: 300, imageSequence: [0, 299], canvas_opacity: [1, 0, { start: 0.9, end: 1}], messageA_opacity_in: [0, 1, { start: 0.1, end: 0.2 }], messageB_opacity_in: [0, 1, { start: 0.3, end: 0.4 }], messageC_opacity_in: [0, 1, { start: 0.5, end: 0.6 }], messageD_opacity_in: [0, 1, { start: 0.7, end: 0.8 }], messageA_translateY_in: [20, 0, { start: 0.1, end: 0.2 }], messageB_translateY_in: [20, 0, { start: 0.3, end: 0.4 }], messageC_translateY_in: [20, 0, { start: 0.5, end: 0.6 }], messageD_translateY_in: [20, 0, { start: 0.7, end: 0.8 }], messageA_opacity_out: [1, 0, { start: 0.25, end: 0.3 }], messageB_opacity_out: [1, 0, { start: 0.45, end: 0.5 }], messageC_opacity_out: [1, 0, { start: 0.65, end: 0.7 }], messageD_opacity_out: [1, 0, { start: 0.85, end: 0.9 }], messageA_translateY_out: [0, -20, { start: 0.25, end: 0.3 }], messageB_translateY_out: [0, -20, { start: 0.45, end: 0.5 }], messageC_translateY_out: [0, -20, { start: 0.65, end: 0.7 }], messageD_translateY_out: [0, -20, { start: 0.85, end: 0.9 }] } }, { // 1 type: 'normal', // heightNum: 5, // type normal에서는 필요 없음 scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-1') } }, { // 2 type: 'sticky', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-2'), messageA: document.querySelector('#scroll-section-2 .a'), messageB: document.querySelector('#scroll-section-2 .b'), messageC: document.querySelector('#scroll-section-2 .c'), pinB: document.querySelector('#scroll-section-2 .b .pin'), pinC: document.querySelector('#scroll-section-2 .c .pin'), canvas: document.querySelector('#video-canvas-1'), context: document.querySelector('#video-canvas-1').getContext('2d'), videoImages: [] }, values: { videoImagesCount: 960, imageSequence: [0, 959], canvas_opacity_in: [0, 1, { start: 0, end: 0.1 }], canvas_opacity_out: [1, 0, { start: 0.95, end: 1 }], messageA_translateY_in: [20, 0, { start: 0.15, end: 0.2 }], messageB_translateY_in: [30, 0, { start: 0.6, end: 0.65 }], messageC_translateY_in: [30, 0, { start: 0.87, end: 0.92 }], messageA_opacity_in: [0, 1, { start: 0.25, end: 0.3 }], messageB_opacity_in: [0, 1, { start: 0.6, end: 0.65 }], messageC_opacity_in: [0, 1, { start: 0.87, end: 0.92 }], messageA_translateY_out: [0, -20, { start: 0.4, end: 0.45 }], messageB_translateY_out: [0, -20, { start: 0.68, end: 0.73 }], messageC_translateY_out: [0, -20, { start: 0.95, end: 1 }], messageA_opacity_out: [1, 0, { start: 0.4, end: 0.45 }], messageB_opacity_out: [1, 0, { start: 0.68, end: 0.73 }], messageC_opacity_out: [1, 0, { start: 0.95, end: 1 }], pinB_scaleY: [0.5, 1, { start: 0.6, end: 0.65 }], pinC_scaleY: [0.5, 1, { start: 0.87, end: 0.92 }] } }, { // 3 type: 'sticky', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-3'), canvasCaption: document.querySelector('.canvas-caption') }, values: { } } ]; function setCanvasImages() { let imgElem; for ( let i = 0; i < sceneInfo[0].values.videoImagesCount; i++) { imgElem = new Image(); // = imgElems = document.createElement('img'); imgElem.src = `./video/001/IMG_${6726 + i}.JPG`; sceneInfo[0].objs.videoImages.push(imgElem); } let imgElem2; for ( let i = 0; i < sceneInfo[2].values.videoImagesCount; i++) { imgElem2 = new Image(); // = imgElems = document.createElement('img'); imgElem2.src = `./video/002/IMG_${7027 + i}.JPG`; sceneInfo[2].objs.videoImages.push(imgElem2); } // console.log(sceneInfo[0].objs.videoImages); } setCanvasImages(); 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.container.offsetHeight; } 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}`); const heightRatio = window.innerHeight / 1080; sceneInfo[0].objs.canvas.style.transform = `translate3d(-50%, -50%, 0) scale(${heightRatio})`; sceneInfo[2].objs.canvas.style.transform = `translate3d(-50%, -50%, 0) scale(${heightRatio})`; // console.log(sceneInfo); } function calcValues(values, currentYOffset) { let rv; // 현재 씬 (스크롤섹션)에서 스크롤된 범위를 비율로 구하기 const scrollHeight = sceneInfo[currentScene].scrollHeight; const scrollRatio = currentYOffset / scrollHeight; if (values.length === 3 ) { // start ~ end 사이에 애니메이션 실행 const partScrollStart = values[2].start * scrollHeight; const partScrollEnd = values[2].end * scrollHeight; const partScrollHeight = partScrollEnd - partScrollStart; if(currentYOffset >= partScrollStart && currentYOffset <= partScrollEnd) { rv = (currentYOffset - partScrollStart) / partScrollHeight * (values[1] - values[0]) + values[0]; } else if (currentYOffset < partScrollStart) { rv = values[0]; } else if (currentYOffset > partScrollEnd) { rv = values[1]; } } else { rv = scrollRatio * (values[1] - values[0]) + values[0]; } return rv; } function playAnimation() { const objs = sceneInfo[currentScene].objs; const values = sceneInfo[currentScene].values; const currentYOffset = yOffset - prevScrollHeight; const scrollHeight = sceneInfo[currentScene].scrollHeight; const scrollRatio = currentYOffset / scrollHeight; switch (currentScene) { case 0: // console.log('0 play'); let sequence = Math.round(calcValues(values.imageSequence, currentYOffset)); // console.log(sequence); objs.context.drawImage(objs.videoImages[sequence], 0, 0); objs.canvas.style.opacity = calcValues(values.canvas_opacity, currentYOffset); if (scrollRatio <= 0.22) { // in objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.42) { // in objs.messageB.style.opacity = calcValues(values.messageB_opacity_in, currentYOffset); objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset); objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.62) { // in objs.messageC.style.opacity = calcValues(values.messageC_opacity_in, currentYOffset); objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageC.style.opacity = calcValues(values.messageC_opacity_out, currentYOffset); objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.82) { // in objs.messageD.style.opacity = calcValues(values.messageD_opacity_in, currentYOffset); objs.messageD.style.transform = `translate3d(0, ${calcValues(values.messageD_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageD.style.opacity = calcValues(values.messageD_opacity_out, currentYOffset); objs.messageD.style.transform = `translate3d(0, ${calcValues(values.messageD_translateY_out, currentYOffset)}%, 0)`; } break; case 2: // console.log('2 play'); let sequence2 = Math.round(calcValues(values.imageSequence, currentYOffset)); objs.context.drawImage(objs.videoImages[sequence2], 0, 0); if (scrollRatio <= 0.5) { objs.canvas.style.opacity = calcValues(values.canvas_opacity_in, currentYOffset); } else { objs.canvas.style.opacity = calcValues(values.canvas_opacity_out, currentYOffset); } if (scrollRatio <= 0.32) { // in objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.67) { // in objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_in, currentYOffset)}%, 0)`; objs.messageB.style.opacity = calcValues(values.messageB_opacity_in, currentYOffset); objs.pinB.style.transform = `scaleY(${calcValues(values.pinB_scaleY, currentYOffset)})`; } else { // out objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_out, currentYOffset)}%, 0)`; objs.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset); objs.pinB.style.transform = `scaleY(${calcValues(values.pinB_scaleY, currentYOffset)})`; } if (scrollRatio <= 0.93) { // in objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_in, currentYOffset)}%, 0)`; objs.messageC.style.opacity = calcValues(values.messageC_opacity_in, currentYOffset); objs.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleY, currentYOffset)})`; } else { // out objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_out, currentYOffset)}%, 0)`; objs.messageC.style.opacity = calcValues(values.messageC_opacity_out, currentYOffset); objs.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleY, currentYOffset)})`; } break; case 3: // console.log('3 play'); break; } } function scrollLoop() { prevScrollHeight = 0; for (let i = 0; i < currentScene; i++) { prevScrollHeight = prevScrollHeight + sceneInfo[i].scrollHeight; // +=를 사용하고 뒤에 prevScrollHeight 지워도 동일 } if(yOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight) { currentScene++; document.body.setAttribute('id', `show-scene-${currentScene}`); } if(yOffset < prevScrollHeight) { if (currentScene === 0) return; // 브라우저 바운스 효과로 인해 마이너스가 되는것을 방지 currentScene--; document.body.setAttribute('id', `show-scene-${currentScene}`); } playAnimation(); } window.addEventListener('scroll', () => { yOffset = window.pageYOffset; scrollLoop(); }); window.addEventListener('load', () => { setLayout(); sceneInfo[0].objs.context.drawImage(sceneInfo[0].objs.videoImages[0], 0, 0); }); window.addEventListener('resize', setLayout); setLayout(); })();
- 해결됨애플 웹사이트 인터랙션 클론!
마지막 문단의 opacity 0으로 초기화 관련
안녕하세요 친절한 강의 너무 잘보고있습니다! 다름이 아니라 마지막 문단의 opacity 애니메이션에서 스크롤을 올렸을때 시작값(0)으로 초기화가 되질 않아서 질문드립니다 ㅠㅠ 제가 확인한바로는 scrollRatio가 start시점보다 작아지지 않아서 그러는것같은데.. 이부분 확인해주실수있을까요?... 코드는 이곳에 477라인부터 있습니다! 감사합니당
- 해결됨애플 웹사이트 인터랙션 클론!
오잉 해당강의는 없는건가요??
아무것도 재생되는거 없고 자료도 안보이는데 ㅠ 어떤걸 확인하면 될까용
- 미해결애플 웹사이트 인터랙션 클론!
IE버전은 11기준으로 제작된 영상인가요?
안녕하세요 강사님 항상 유튜브로 접하다가, 들어보고 싶은 강의라 구매해서 듣고 있습니다.혹시 이 영상 IE기준은 11기준으로 제작된 영상인건가요?
- 해결됨애플 웹사이트 인터랙션 클론!
스크롤 섹션 2번째
강사님의 강의를 따라가면서 계속 듣다 보니 뭔가 이상한 점이 생겨서 알아보았습니다. 좌측은 제가 코딩을 하고 있는 부분(비디오 인터렉션 직전)이고 우측은 강사님이 작성하신 코드로 만들어진 예제에 제가 테두리 색을 넣은것 입니다 2번째 창에는 원래 보통 스크롤 영역이라고 표기된 저 nomal텍스트가 들어가는 걸로 알고 있는데 3번째 섹션[index 2번]에 들어가 있더라고요. 이게 어떤 이유인지 궁금해서 질문 남겼습니다
- 미해결애플 웹사이트 인터랙션 클론!
loop() 를 호출하지않아도 실행되는 원리가 뭔가요,,?
이전 강의에서는 loop(); 이렇게 따로 호출해줬는데 여기선 호출을 안해도 실행이 되네요..!
- 미해결애플 웹사이트 인터랙션 클론!
step = 2에서 (캔버스가 닿은 후)
안녕하세요 : ) 항상 강의 너무 재밌게 잘 듣고 있습니다 ! 혹시 apple 사이트처럼 캔버스가 닿았을 때, 캔버스 위에 추가적으로 텍스트를 넣고 싶은데 어떻게 접근 해야 하나요 ㅜㅜ?
- 미해결애플 웹사이트 인터랙션 클론!
opacity가 0이 안되어 질문드립니다.
안녕하세요! opacity가 0이 안되어 질문드립니다. 왜 스크롤할때마다 opacity 값이 달라지는지 이해가 가지않아서요... https://seon-o.github.io/apple-website/
- 해결됨애플 웹사이트 인터랙션 클론!
예외처리
if(enterNweScene == true){ return } playAnimation(); 선생님이 위쪽 코드로알려 주셨는데 제 생각에는 if(enterNweScene == false){ playAnimation(); } 이 코드와 별반 차이가 없다고 생각 되는데 혹시 퍼포먼스나 메모리등에 대해 차이가 있나요? 아니면 그냥 똑같은데 스타일 차이인가요?
- 미해결애플 웹사이트 인터랙션 클론!
video vs canvas
스크롤에 따라서 동영상이 움직이는 애니메이션 관련해서 궁금한게 있는데요애플은 동영상을 프레임단위로 쪼개서 canvas에 drawImage하는 방법을 썻는데그냥 video 태그에 동영상을 연결하고 스크롤에 따라서 currentTime을 조절하는 방법을 쓰지 않은 이유가 뭘까요?
- 해결됨애플 웹사이트 인터랙션 클론!
중복에 관한 질문
제가 느끼기로는 setLayout()에 쓴 scrollLoop()에 쓴 이거 두개가 별 차이가 없다고 느껴지는데 굳이 다르게 작성한 이유가 있나요? 함수로 빼서 각각 한번씩 호출하면 될거 같은데 설명 부탁드립니다 ㅠㅠ
- 미해결애플 웹사이트 인터랙션 클론!
이미지시퀀스 질문입니다.
제가 이미지시퀀스 JPG를 컵모양파일 말고 제가 따로 mp4를 jpg로 변환하여 경로만 달리하고 넣었는데 이렇게 오류가 뜨면서 재생이 안되는 이유가 뭘까요..?ㅠㅠ values: { videoImageCount:177, imageSequence:[0,176], canvas_opacity:[1,0, {start:0.9, end:1}], 이렇게 사진갯수와 맞게 수정하고 function setCanvasImages(){ let imgElem; for ( let i = 0; i < sceneInfo[0].values.videoImageCount; i++){ imgElem = new Image(); imgElem.src = `./video/video01_000/video01_${000 + i}.JPG`; sceneInfo[0].objs.videoImages.push(imgElem); } 경로도 수정하였습니다
- 해결됨애플 웹사이트 인터랙션 클론!
클린코드(8:02부분)
강의 8:02에 .local-nav-links .product-name을 하여 .local-nav-links a보다 우선순위를 올려 주셨는데 앞서 작성하신 .local-nav-links a:not(.product-name)에 fontr-size를 정해주고 .porduct-name에 굵기, 크기를 조절해준다면 더 클린한 코드 아닌가요? 사실 크게 상관 없을거 같은데 궁금해서 질의 합니다. 8:02부분과 이 코드를 비교하시면 제질문이 이해되기 쉬울거 같습니다. .product-name { margin-right: auto; font-size: 1.2rem; font-weight: bold; } .local-nav-links a:not(.product-name) { margin-left: 2em; font-size: 0.8rem; }
- 미해결애플 웹사이트 인터랙션 클론!
살짝 궁금한 게 있어서 질문 드립니다!
혹시 개발하실 때 실무에서 사용하는 이런 성능 차이를 볼 수 있는 방법이 있나요?? 크롬 개발자 도구라든가 아니면 외부 툴 같은 것이 있나요??
- 미해결애플 웹사이트 인터랙션 클론!
document.body.classList.remove('before-load'); 질문
안녕하세요! 우선 명강의 잘듣고 있습니다🙇♀️🙇♂️ 강의를 듣다가 궁금한것이 생겼는데요 init()함수를 실행할 때마다 document.body.classList.remove('before-load')로 계속 before-load를 지워주는 이유가 무엇인가요?