월 15,400원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결애플 웹사이트 인터랙션 클론!
align-items : center
안녕하세요 ! 이미지 백그라운드를 blue로 했을 경우 align-items : center를 주면 왜 해당 영역이 확대되면서 커지는지 이해가 조금 부족하여 조금만 설명 덧붙여주시면 감사하겠습니다 ㅠㅠㅠ align-items를 적용적에는 화면안에서 크기가 다 보였는데 align-items를 적용했다고 갑자기 확대되면서 크기가 넘치는게 이해가안돼요 ㅠㅠ
- 미해결애플 웹사이트 인터랙션 클론!
canvas작업
해당 이미지를 맞춰주려고 많은 작업이 들어갔는데 혹시 일단 이미지 파일로도 대체가능할까요 ? 이미지 파일로 대체한다면 코딩 부분이 없어져서 더 깔끔하지 않을까요 ? 현재는 캔버스 작업이라서 강제로 캔버스 코딩을 넣어주신거죠 ?! 일반적으로 캔버스 이미지를 사용하는지 아니면 img태그를 활용하는지 궁금합니다 !
- 미해결애플 웹사이트 인터랙션 클론!
body의 'show-scene-3'부분에서 새로고침시 'show-scene-2'가 떠요
body의 'show-scene-3'부분에서 새로고침시 'show-scene-2'가 뜹니다ㅠㅠ 스크롤을 최 하단으로 내려서 새로고침해도 'show-scene-2'다 먼저 뜨고, 거기서 스크롤을 다시 움직이면 그때 'show-scene-3'로 바뀝니다.
- 미해결애플 웹사이트 인터랙션 클론!
main-add.js 코드 오류 있습니다. 이거 보고 수정하세요
main-add.js 내용 적용했는데 section-2 부분의 messageC부분이 section3까지 넘어가서 뭔가 이상하다고 생각했습니다. 실제로, 강의 영상에 나온 것이랑 값이 차이나서 수정한 부분 올립니다. sceneInfo의 section2부분의 value만 변경해주시면 됩니다. values: { messageA_translateY_in: [20, 0, { start: 0.15, end: 0.2 }], messageB_translateY_in: [30, 0, { start: 0.5, end: 0.55 }], messageC_translateY_in: [30, 0, { start: 0.72, end: 0.77 }], messageA_opacity_in: [0, 1, { start: 0.15, end: 0.2 }], messageB_opacity_in: [0, 1, { start: 0.5, end: 0.55 }], messageC_opacity_in: [0, 1, { start: 0.72, end: 0.77 }], messageA_translateY_out: [0, -20, { start: 0.3, end: 0.35 }], messageB_translateY_out: [0, -20, { start: 0.58, end: 0.63 }], messageC_translateY_out: [0, -20, { start: 0.85, end: 0.9 }], messageA_opacity_out: [1, 0, { start: 0.3, end: 0.35 }], messageB_opacity_out: [1, 0, { start: 0.58, end: 0.63 }], messageC_opacity_out: [1, 0, { start: 0.85, end: 0.9 }], pinB_scaleY: [0.5, 1, { start: 0.5, end: 0.55 }], pinC_scaleY: [0.5, 1, { start: 0.72, end: 0.77 }], pinB_opacity_in: [0, 1, { start: 0.5, end: 0.55 }], pinC_opacity_in: [0, 1, { start: 0.72, end: 0.77 }], pinB_opacity_out: [1, 0, { start: 0.58, end: 0.63 }], pinC_opacity_out: [1, 0, { start: 0.85, end: 0.9 }], },
- 미해결애플 웹사이트 인터랙션 클론!
혹시 canvas에 margin을 준경우
canvas 위의 Retina 머그쪽 글과 간격이 너무 붙어버려서 canvas에 margin : 20vh 0 을 주었었는데요. 해당 margin 때문에 sticky 클래스가 붙었을때 자바스크립트로 top값을 - 해줘도 공간이남아버리는데. 어떻게해주어야할까요. 일단 임시로 canvas가 아니라 저 메세지가 담겨있는는 p태그에 margin 주는걸로 바꿔서 해결하긴했지만. canvas 자체에 margin이 있을때는 어떻게해야할지..
- 미해결애플 웹사이트 인터랙션 클론!
values의 수치에 관해서
values: { messageA_opacity_in: [0, 1, {start: 0.15, end: 0.2}], messageA_opacity_out: [1, 0, {start: 0.3, end: 0.35}], messageA_translateY_in: [20, 0, {start: 0.15, end: 0.2}], messageA_translateY_out: [0, -20, {start: 0.3, end: 0.35}], messageB_opacity_in: [0, 1, {start: 0.5, end: 0.55}], messageB_opacity_out: [1, 0, {start: 0.58, end: 0.63}], messageB_translateY_in: [20, 0, {start: 0.5, end: 0.55}], messageB_translateY_out: [0, -20, {start: 0.58, end: 0.63}], messageC_opacity_in: [0, 1, {start: 0.72, end: 0.77}], messageC_opacity_out: [1, 0, {start: 0.85, end: 0.9}], messageC_translateY_in: [20, 0, {start: 0.72, end: 0.77}], messageC_translateY_out: [0, -20, {start: 0.85, end: 0.9}], pinB_scaleY: [0.5, 1, {start: 0.5, end: 0.55}], pinC_scaleY: [0.5, 1, {start: 0.72, end: 0.77}], } 위의 코드는 동영상을 보면서 작성한 코드이구요 messageA_opacity_in: [0, 1, {start: 0.15, end: 0.2}], messageA_opacity_out: [1, 0, {start: 0.3, end: 0.35}], messageA_translateY_in: [20, 0, {start: 0.15, end: 0.2}], messageA_translateY_out: [0, -20, {start: 0.3, end: 0.35}], messageB_opacity_in: [0, 1, {start: 0.6, end: 0.65}], messageB_opacity_out: [1, 0, {start: 0.68, end: 0.73}], messageB_translateY_in: [20, 0, {start: 0.6, end: 0.65}], messageB_translateY_out: [0, -20, {start: 0.68, end: 0.73}], messageC_opacity_in: [0, 1, {start: 0.87, end: 0.92}], messageC_opacity_out: [1, 0, {start: 0.95, end: 1}], messageC_translateY_in: [20, 0, {start: 0.87, end: 0.92}], messageC_translateY_out: [0, -20, {start: 0.95, end: 0.1}], pinB_scaleY: [0.5, 1, {start: 0.6, end: 0.65}], pinC_scaleY: [0.5, 1, {start: 0.87, end: 0.92}], 위의 코드는 수치를 변경해서 작성한 코드입니다. 제일 위의 코드를 사용했을 땐 .pin이 out되지 않는 현상이 나타났는데 아래의 코드를 사용하니 .pin의 out 애니메이션이 정상적으로 동작하더군요 왜 이런 차이가 나는지 궁금합니다.
- 미해결애플 웹사이트 인터랙션 클론!
scroll 함수안에 requestAnimationFrame
scroll 함수안에 requestAnimationFrame 을 쓴 목적이 무엇인가요?? 검색해보니 함수가 과하게 반복(?)되는걸 방지하기위해서 requestAnimation 안에 넣는다는 글을 봤는데. 예제에서도 동일한 이유로 requestAnimation 안에 이미지 불러오는 기능을 넣은건지요.
- 미해결애플 웹사이트 인터랙션 클론!
검은색 영역 애니메이션이 움직이지 않습니다.
안녕하세요 강의 잘 듣고 있습니다. 제가 강의를 보면서 따라하던 도중 이상하게 검은색 박스는 생기지만 옆으로 움직이면서 서서히 사라지는 부분이 안 됌니다. 그런데 아무리 찾아보아도 문제의 원인을 모르겠습니다.(제가 변수의 이름을 제가 알기 쉽게 바꾼게 몇개 존재합니다.) (() => { let yoffset = 0; let prevScrollHeight = 0;//이전 스크롤 섹션의 높이를 담음 let currentScene = 0 //현재 활성화된 씬 let enterScene = false; const sectionInfo = [ //0 { type : 'sticky', heightNum : 5, height : 0, objs : { section : document.querySelector('#scroll-section-1'), MessageA : document.querySelector('#scroll-section-1 .main-message.a'), MessageB : document.querySelector('#scroll-section-1 .main-message.b'), MessageC : document.querySelector('#scroll-section-1 .main-message.c'), MessageD : document.querySelector('#scroll-section-1 .main-message.d'), canvas : document.querySelector('#scroll-section-1 #first_canvas'), ctx : document.querySelector('#scroll-section-1 #first_canvas').getContext('2d'), }, values : { //비디오 정보 img_values : 300, img_obj : [], imgeSequence : [0,300], canvas_opacity : [1,0,{start : 0.9, end : 1}], //투명도 조절 messageA_fade_in : [0,1,{start : 0.1, end : 0.2}], messageB_fade_in : [0,1,{start : 0.3, end : 0.4}], messageC_fade_in : [0,1,{start : 0.5, end : 0.6}], messageA_fade_out : [1,0,{start : 0.25, end : 0.3}], messageB_fade_out : [1,0,{start : 0.45, end : 0.5}], messageC_fade_out : [1,0,{start : 0.65, end : 0.7}], //transform 조절 messageA_transform_in : [20,0,{start: 0.1, end : 0.2}], messageB_transform_in : [20,0,{start: 0.3, end : 0.4}], messageC_transform_in : [20,0,{start: 0.5, end : 0.6}], messageA_transform_out : [0,-20,{start: 0.25, end : 0.3}], messageB_transform_out : [0,-20,{start: 0.45, end : 0.5}], messageC_transform_out : [0,-20,{start: 0.65, end : 0.7}], } }, //1 { type : 'normal', heightNum : 5, height : 0, objs : { section : document.querySelector('#scroll-section-2'), }, values : { } }, //2 { type : 'sticky', heightNum : 5, height : 0, objs : { section : document.querySelector('#scroll-section-3'), desc_messageA: document.querySelector('#scroll-section-3 .desc-message.a'), desc_messageB : document.querySelector('#scroll-section-3 .desc-message.b'), desc_messageC : document.querySelector('#scroll-section-3 .desc-message.c'), canvas : document.querySelector('#scroll-section-3 #second_canvas'), ctx : document.querySelector('#scroll-section-3 #second_canvas').getContext('2d'), }, values : { img_values : 960, img_obj : [], imgeSequence : [0,960], canvas_fade_in : [0,1, {start : 0.05, end : 0.1}], canvas_fade_out : [1,0, {start : 0.9, end : 1}], //투명도 desc_messageA_fade_in : [0 , 1, {start : 0.1, end : 0.2}], desc_messageB_fade_in : [0 , 1, {start : 0.3, end : 0.4}], desc_messageC_fade_in : [0 , 1, {start : 0.5, end : 0.6}], desc_messageA_fade_out : [1 , 0, {start : 0.25, end : 0.3}], desc_messageB_fade_out : [1 , 0, {start : 0.45, end : 0.5}], desc_messageC_fade_out : [1 , 0, {start : 0.65, end : 0.7}], //transform 조절 desc_messageA_transform_in : [20,0,{start : 0.1, end : 0.2}], desc_messageB_transform_in : [20,0,{start : 0.3, end : 0.4}], desc_messageC_transform_in : [20,0,{start : 0.5, end : 0.6}], desc_messageA_transform_out : [0,-20,{start : 0.25, end : 0.3}], desc_messageB_transform_out : [0,-20,{start : 0.45, end : 0.5}], desc_messageC_transform_out : [0,-20,{start : 0.65, end : 0.7}], } }, //3 { type : 'sticky', heightNum : 5, height : 0, objs : { section : document.querySelector('#scroll-section-4'), mainMessageA : document.querySelector('mid-message.a'), canvas : document.querySelector('#third_canvas'), ctx : document.querySelector('#third_canvas').getContext('2d'), }, values : { imgsrc : [ './images/blend-image-1.jpg', './images/blend-image-2.jpg' ], discrimination : 0, img_obj : [], recet1X : [0,0, {start: 0, end: 0}], recet2X : [0,0, {start: 0, end: 0}], rectscrollY : 0, } } ] function setHeight() { yoffset = window.pageYOffset; let totalHeight = 0; //각 섹션별 높이를 전부 담는 변수 const canvasRatio = window.innerHeight / 1080; //마지막 캔버스를 제외한 나머지 캔버스의 비율 for(let i = 0; i < sectionInfo.length; i++){ let sectionNum = sectionInfo[i]; let calcHeight = 0; if( sectionNum.type === 'sticky' ){ calcHeight = window.innerHeight * sectionNum.heightNum; sectionNum.height = calcHeight; sectionNum.objs.section.style.height = `${calcHeight}px` }else{ calcHeight = sectionInfo[i].objs.section.offsetHeight; sectionNum.height = calcHeight; } sectionNum.objs.section.style.height = `${calcHeight}px` } for(let i = 0; i < sectionInfo.length; i++){ totalHeight += sectionInfo[i].height; if( totalHeight >= window.pageYOffset){ currentScene = i; break; } } sectionInfo[0].objs.canvas.style.transform = `translate3d(-50%,-50%,0) scale(${canvasRatio})`; sectionInfo[2].objs.canvas.style.transform = `translate3d(-50%,-50%,0) scale(${canvasRatio})`; document.body.id = `show-scene-${currentScene}`; } function setCanvasImage() { let imgElem; let imgElem2; let imgElem3; for (let i = 0; i < sectionInfo[0].values.img_values; i++){ imgElem = new Image(); imgElem.src = `./video/001/IMG_${6726 + i}.jpg`; sectionInfo[0].values.img_obj.push(imgElem); } for (let i = 0; i < sectionInfo[2].values.img_values; i++){ imgElem2 = new Image(); imgElem2.src = `./video/002/IMG_${7027 + i}.jpg`; sectionInfo[2].values.img_obj.push(imgElem2); } for (let i = 0; i < sectionInfo[3].values.imgsrc.length; i++){ imgElem3 = new Image(); imgElem3.src = sectionInfo[3].values.imgsrc[i]; sectionInfo[3].values.img_obj.push(imgElem3); } } setCanvasImage(); function scrollLoop() { enterScene = false; prevScrollHeight = 0; for(let i = 0; i < currentScene; i++){ prevScrollHeight += sectionInfo[i].height; } if(yoffset > prevScrollHeight + sectionInfo[currentScene].height){ enterScene = true; currentScene++; document.body.id = `show-scene-${currentScene}`; } if ( yoffset < prevScrollHeight ){ if(yoffset < 0) return; enterScene = true; currentScene--; document.body.id = `show-scene-${currentScene}`; } if ( enterScene ) return; playAnimation(); } //애니메이션 처리 값과 현재 씬에서의 스크롤 비율을 넘겨받음 function calcValues(values,currentYoffset){ let rv;//값을 계산해 리턴해줄 변수 const scrollHeight = sectionInfo[currentScene].height; const scrollRatio = currentYoffset / sectionInfo[currentScene].height;//현재씬의 스크롤 비율 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 = sectionInfo[currentScene].objs; const values = sectionInfo[currentScene].values; const currentYoffset = yoffset - prevScrollHeight; const scrollHeight = sectionInfo[currentScene].height; const scrollRatio = currentYoffset / scrollHeight; switch(currentScene){ case 0: if ( scrollRatio <= 0.22 ){ objs.MessageA.style.opacity = calcValues(values.messageA_fade_in,currentYoffset); objs.MessageA.style.transform = `translateY(${calcValues(values.messageA_transform_in,currentYoffset)}%)`; } else{ objs.MessageA.style.opacity = calcValues(values.messageA_fade_out,currentYoffset); objs.MessageA.style.transform = `translateY(${calcValues(values.messageA_transform_out,currentYoffset)}%)`; } if(scrollRatio < 0.43){ objs.MessageB.style.opacity = calcValues(values.messageB_fade_in,currentYoffset); objs.MessageB.style.transform = `translateY(${calcValues(values.messageB_transform_in,currentYoffset)}%)`; }else{ objs.MessageB.style.opacity = calcValues(values.messageB_fade_out,currentYoffset); objs.MessageB.style.transform = `translateY(${calcValues(values.messageB_transform_out,currentYoffset)}%)`; } if( scrollRatio < 0.63 ){ objs.MessageC.style.opacity = calcValues(values.messageC_fade_in,currentYoffset); objs.MessageC.style.transform = `translateY(${calcValues(values.messageC_transform_in,currentYoffset)}%)`; }else{ objs.MessageC.style.opacity = calcValues(values.messageC_fade_out,currentYoffset); objs.MessageC.style.transform = `translateY(${calcValues(values.messageC_transform_out,currentYoffset)}%)`; } let imgeSequence = Math.floor(calcValues(sectionInfo[0].values.imgeSequence,currentYoffset)); objs.ctx.drawImage(values.img_obj[imgeSequence],0,0); objs.canvas.style.opacity = calcValues(values.canvas_opacity,currentYoffset); break; case 1: break; case 2: if( scrollRatio <= 0.22 ){ objs.desc_messageA.style.opacity = calcValues(values.desc_messageA_fade_in,currentYoffset); objs.desc_messageA.style.transform = `translate3d(-50%, ${calcValues(values.desc_messageA_transform_in,currentYoffset)}%, 0)`; } else{ objs.desc_messageA.style.opacity = calcValues(values.desc_messageA_fade_out,currentYoffset); objs.desc_messageA.style.transform = `translate3d(-50%, ${calcValues(values.desc_messageA_transform_out,currentYoffset)}%, 0)`; } if ( scrollRatio < 0.42 ){ objs.desc_messageB.style.opacity = calcValues(values.desc_messageB_fade_in,currentYoffset); objs.desc_messageB.style.transform = `translate3d(-50%, ${calcValues(values.desc_messageB_transform_in,currentYoffset)}%, 0)`; }else{ objs.desc_messageB.style.opacity = calcValues(values.desc_messageB_fade_out,currentYoffset); objs.desc_messageB.style.transform = `translate3d(-50%, ${calcValues(values.desc_messageB_transform_out,currentYoffset)}%, 0)`; } if ( scrollRatio < 0.62 ){ objs.desc_messageC.style.opacity = calcValues(values.desc_messageC_fade_in,currentYoffset); objs.desc_messageC.style.transform = `translate3d(-50%, ${calcValues(values.desc_messageC_transform_in,currentYoffset)}%, 0)`; }else{ objs.desc_messageC.style.opacity = calcValues(values.desc_messageC_fade_out,currentYoffset); objs.desc_messageC.style.transform = `translate3d(-50%, ${calcValues(values.desc_messageC_transform_out,currentYoffset)}%, 0)`; } if(scrollRatio < 0.5){ objs.canvas.style.opacity = calcValues(values.canvas_fade_in,currentYoffset); }else{ objs.canvas.style.opacity = calcValues(values.canvas_fade_out,currentYoffset); } let imageSequence2 = Math.floor(calcValues(values.imgeSequence,currentYoffset)); objs.ctx.drawImage(values.img_obj[imageSequence2],0,0); break; case 3: const widthRatio = window.innerWidth / objs.canvas.width; const heightRatio = window.innerHeight / objs.canvas.height; if ( widthRatio <= heightRatio ){ objs.canvas.style.transform = `scale(${heightRatio})`; }else{ objs.canvas.style.transform = `scale(${widthRatio})`; } const newWidth = document.body.offsetWidth / widthRatio//안쪽의 content영역의 width값을 구하기 위한 계산 const newheight = window.innerHeight / heightRatio//안쪽의 content영역의 높이를 구하기 위한 계산 const blockArea = newWidth * 0.15; values.recet1X[0] = (objs.canvas.width - newWidth) / 2; // 애니메이션 시작 지점을 계산 values.recet1X[1] = values.recet1X[0] - blockArea;//애니메이션 끝 지점을 계산 values.recet2X[0] = (values.recet1X[0] + newWidth) - blockArea; // 오른쪽 블록의 애니메이션 시작지점을 계산 values.recet2X[1] = values.recet2X[1] + blockArea//오른쪽 애니메이션의 끝 지점을 지정 if(!values.rectscrollY){ values.rectscrollY = objs.canvas.getBoundingClientRect().top; values.recet1X[2].end = values.rectscrollY / scrollHeight; values.recet2X[2].end = values.rectscrollY / scrollHeight; } objs.ctx.fillRect( parseInt(calcValues(values.recet1X, currentYoffset)), 0, parseInt(blockArea), objs.canvas.height ); objs.ctx.fillRect( parseInt(calcValues(values.recet2X, currentYoffset)), 0, parseInt(blockArea), objs.canvas.height ); break; } } window.addEventListener('resize',setHeight); window.addEventListener('scroll',() => { yoffset = window.pageYOffset; scrollLoop() }); window.addEventListener('load',() => { setHeight(); sectionInfo[0].objs.ctx.drawImage(sectionInfo[0].values.img_obj[0],0,0); sectionInfo[3].objs.ctx.drawImage(sectionInfo[3].values.img_obj[0],0,0); }); })();
- 미해결애플 웹사이트 인터랙션 클론!
canvas 내 이미지 질문드립니다
배경색을 다른 것을 넣고 투명배경의 png로 이미지 작업을 했더니 이미지가 주르륵 이어져서 나오는데 혹시 이미지를 배열이 아니라 교체하는 방법도 가능할까요?
- 미해결애플 웹사이트 인터랙션 클론!
이런 사이트 구현하는데에 이 강의가 도움이 많이 될까요?
안녕하세용http://farmer.hanbom.com/위의 사이트처럼 구현을 하고싶은데 이 강의가 많은 도움이 될까요?? 이 강의 사놓고 다른 공부에 떠밀려서 완강을 못했습니다 흑흑.. 위의 사이트처럼 구현을 하고싶은데 (리액트환경에서) 이 강의 보면서 할 수 있을까요? 아니면 선생님 강의중에 다른거 추천할만한게 있으실까요?
- 미해결애플 웹사이트 인터랙션 클론!
setLayout console오류
51번줄에 콘솔오류가 떠요ㅜㅜ 3시간째 해결하려고 해도 찾을 수 가 없어서 질문 올립니다!
- 미해결애플 웹사이트 인터랙션 클론!
canvas.context.transform 적용 시 다른 요소를 가리는 현상
안녕하세요! 강의 열심히 따라가고 있습니다 :) 제가 중간에 놓친 부분이 있는지, canvas.context.transform 으로 scrollHeight에 따라서 canvas 사이즈 조절 시에 일분이가 커지면서 뒤에 글씨를 가리고 있는데, 어떤 부분을 놓쳤을까요 ? 뭔가 css 일 것 같은데,css를 잘 몰라서 어떤 부분을 봐야할지모르겠습니다 ㅠㅠ ps. 사용중인 디스플레이가 지금 높이 1440px 인데요, 1080px보다 작은 화면에서는 정상적으로 표시되는것을 보아하니.. canvasScaleRatio가 1보다 클 경우에 문제가 되는 것 같아보입니다 :) transform 적용해제 (개발자도구로 제거) transform 적용후
- 미해결애플 웹사이트 인터랙션 클론!
if문 안에 !를 넣으면 왜 값이 안들어있을 때만 실행이 되나요?
제목이 곧 내용입니다! if(values.rectStartY)에서 values.rectStartY = 0 이고 if문에서 이건 false로 작용한다고 이해했는데요, 그럼 !를 추가해주면 true가 된다는 뜻인거죠? 근데 true이면 왜 values.rectStartY에 값이 안들어있을때만 실행이 되는건가요?? 제가 비전공자라 그런지 이런 true/false의 개념과 응용에 대한 지식이 좀 명확하지 못한 것 같습니다 ㅠㅠ
- 미해결애플 웹사이트 인터랙션 클론!
whiteRectWidth = recalculatedInnerWidth * 0.15 에서
const whiteRectWidth = recalculatedInnerWidth * 0.15에서 0.15는 좌우 각각 0.15씩을 가지는 건가요, 아니면 좌 0.075, 우 0.075씩 가지는건가요?? 의문이 드는 부분이 11:45초부분 식 설명하실 때 values.rect1X[1] = values.rect1X[0] - whiteRectWidth; 여기서 values.rect1X[0] 식에서는 좌우에 남는 부분을 /2 나눠서 정확히 한쪽 부분인 게 인지가 되는데 whiteRectWidth는 recalculatedInnerWidth에서 0.15만큼이니까 한쪽당 0.075라고 생각했는데 그냥 values.rect1X[0]에서 0.15(whiteRectWidth)를 뺀다고 쓰여있어서요. 제가 생각하는 식은 values.rect1X[1] = values.rect1X[0] - (whiteRectWidth / 2) 이런 그림입니다... 이걸 한쪽당 0.15로 잡은 근거가 어딧는지 모르겠어요 !
- 미해결애플 웹사이트 인터랙션 클론!
rect1X[1]의 좌표가 왜 그쪽일까요?
11:41초에서 왜 그쪽이 rect1X[0]의 좌표인지 모르겠어요...ㅠㅠ 제가 어디까지 이해했고 어떤부분에 의문을 가지고 있는지 그림으로 그려서 정리해보았습니다.
- 미해결애플 웹사이트 인터랙션 클론!
pin을 포함한 메시지 부분의 out 처리가 안 됩니다
좋은 강의 잘 듣고 있습니다. 다른 건 잘 되는데 이상하게 scroll-section-2의 pin을 포함한 엘리먼트(messageB, C)의 opacity out과 translateY out이 적용되지 않네요. 세 시간동안 찾았는데, 결국 도움을 요청합니다. 제 소스에는 scroll-section-2의 messageA, B, C를 다르게 네이밍했으니 참고 부탁드립니다. ( messageA -> mainMessage, messageB -> descMessageA, messageC -> descMessageB, pinB -> pinA pinC -> pinB) https://github.com/redonearth/studiomeal-tutorial/tree/master/apple-clone
- 미해결애플 웹사이트 인터랙션 클론!
캔버스 렌더링 오류
if (objs.videoImages[sequence]){ objs.context.drawImage(objs.videoImages[sequence], 0, 0)} loop()함수 안에서 위와 같이 분기처리를 했는데도 Scene이 바뀔 때 아래와 같이 에러가 나면서 이미지가 변경이 안되고 있습니다. Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state. 어떤 문제가 있는지 알고 싶습니다~~
- 미해결애플 웹사이트 인터랙션 클론!
웹 스크롤바를 없애려면 어떻게 하면될까요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 구글링을 통해서 overflow y :hidden 을 줬습니다 스크롤바가 사라지긴 했는데, 스크롤 자체가 아예 안 먹히더라구요 혹시 세로 스크롤바를 없애려면 어떻게 하는지 알 수 있을까요
- 미해결애플 웹사이트 인터랙션 클론!
클래스 선택자 질문입니다
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 클래스 선택할떄 궁금한 점이 생겨 질문드립니다. 우선, 제가 가장 최근에 학습한 곳까지의 파일로 예를 들어보겠습니다. main-add.js에서, ``` 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') }, ``` 이렇게 되어있습니다. 위코드에선 main-mesage 와 a 클래스를 가지고 있는 태그를 선택하는 거 같았습니다. 다만, 밑에 코드에서 궁금한 점이 생깁니다. 왜냐하면, " '#scroll-section-2 .a' " 부분에서 " '#scroll-section-2 .desc-message.a' " 를 넣으면 style이 없다고 에러가 뜹니다. 전자의 선택자에서는 에러 없이 애니메이션 효과가 잘 됩니다. 다만, 후자에서는 해당 선택자가 값이 없다는 에러가 뜨니까, 뭐가 맞는지 헷갈립니다 ㅠ 분명 html 태그 에서 클래스를 선언한 구조는 위 코드와 아래 코드 둘 다 동일한데...잘모르겠습니다. 제가 어디를 잘못 생각하고 있는지 알려주시면 감사하겠습니다. ``` { // 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') }, ``` 이 밑에는 html 태그입니다 ``` ... ... <section class="scroll-section" id="scroll-section-0"> <h1>Airmug Pro</h1> <div class="sticky-elem main-message a"> <!-- p 는 문단 --> <p>온전히 빠져들게 하는<br />최고급 세라믹</p> </div> ... ... <section class="scroll-section" id="scroll-section-2"> <div class="sticky-elem main-message a"> <p> <small>편안한 촉감</small> 입과 하나되다 </p> </div> <div class="sticky-elem desc-message b"> <p> 편안한 목넘김을 완성하는 디테일한 여러 구성 요소들, 우리는 이를 하나하나 새롭게 살피고 재구성하는 과정을 거쳐 새로운 수준의 머그, AirMug Pro를 만들었습니다. 입에 뭔가 댔다는 감각은 어느새 사라지고 오롯이 당신과 음료만 남게 되죠. </p> <div class="pin"> ```
- 미해결애플 웹사이트 인터랙션 클론!
404 질문입니다
이미지가 404가 뜨는데 뭐가 잘못된 건지 잘 모르겠습니다 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { height: 500vh; } body.before-load { overflow-y: hidden; } .sample-canvas { position: fixed; top: 0; left: 0; width: 100%; } </style> </head> <div class="container"> <canvas class="sample-canvas" width="1920" height="1080"></canvas> </div> <script> const canvas = document.querySelector('.sample-canvas'); //context 객체를 이용하여 그림을 그린다 const context = canvas.getContext('2d'); const videoImages = []; let loadedImagesCount = 0; let totalImagesCount = 960; function setImages() { for (let i = 0; i < totalImagesCount; i++) { let imgElem = new Image(); imgElem.src = `../video/002/IMG_${7027 + i}.JPG`; videoImages.push(imgElem); imgElem.addEventListener('load',function(){ loadedImagesCount++; if(loadedImagesCount === totalImagesCount){ init(); } }) } } let progress; let currentFrame; function init() { //0번째 index를 그려주고 시작한다 context.drawImage(videoImages[0], 0, 0); window.addEventListener('scroll', function () { progress = pageYOffset / (document.body.offsetHeight - window.innerHeight); if (progress < 0) progress = 0; if (progress > 1) progress = 1; requestAnimationFrame(function(){ currentFrame = Math.round((totalImagesCount - 1) * progress); //context객체에 drawImage 매서드를 이용해 그림을 캔버스판에 그리는 것 //내가 그릴 이미지 객체를 첫번째에 넣고 x좌표, y좌표 context.drawImage(videoImages[currentFrame], 0, 0); }) }); } window.addEventListener('load', init); setImages(); </script> </body> </html>