vzb0011159

생각보다 쉬운 부분에서 문제가 있었네요...
js에서 이미지 src부분에 확장자 대소문자 차이였습니다ㅠㅠ

블로킹

제가 가지고 있는 이미지들로 계속 안되고 수업에서 사용한 이미지들로는 정상 작동되어서 이미지 파일 이름을 수업내용과 같은 방식으로하고 경로도 절대경로로 변경하였는데 같은 상황만 반복되는데 아에 이미지를 새로 구해야하나요???&nbsp;
MP4 파일을 포토샵으로 프레임 추출하여 사용했는데 이 방법이 문제일수도 있나요?

개발자 도구에서 소스에 video 폴더가 없으면 이미지 오류로 보면 되나요??
포토샵으로 동영상을 불러와서 제작한 이미지들인데 이미지 오류일 경우에는 어떤 방식으로 해결해야하는지 알 수 있을까요??
정상적으로 작동하다가 FTP에 올렸을때&nbsp;<span style="background-color: #ffffff; color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 16px;">이미지 broken state가 뜨는거라서 혹시나하는 마음에 URL도 남겨봅니다!

<a href="http://vzb001.dothome.co.kr/galaxy_Z_Flip/index.html" target="_blank" rel="noopener noreferrer">http://vzb001.dothome.co.kr/galaxy_Z_Flip/index.html</a>

다른 이미지로도 같은 상황입니다..

강의 순서상 박스 색상을 흰색으로 변경한 이후에 스타트를 입력하셨는데 왜 달랐는지가 의문이네요 ㅠㅠ

오류

<pre class="language-javascript"><code>(() => {
 let yOffset = 0; // window.pageYOffset 대신 사용할 변수
 let prevScrollHeight = 0; // 현재 스크롤 위치(yOffset)보다 이전에 위치한 스크롤 섹션들의 스크롤 높이값의 합
 let currentScene = 0; // 현재 활성화된(뷰포트) 씬(scroll-section)
 let enterNewScene = false; // 새로운 씬이 시작되는 순간 true

 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: {
 videoImageCount: 300, // 이미지가 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: {
 videoImageCount: 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'),
 canvas: document.querySelector('.image-blend-canvas'),
 context: document.querySelector('.image-blend-canvas').getContext('2d'),
 imagePath: [
 './images/blend-image-1.jpg',
 './images/blend-image-2.jpg'
 ],
 images: []
 },
 values: {
 rect1X: [0, 0, { sctart: 0, end: 0 }],
 rect2X: [0, 0, { sctart: 0, end: 0 }],
 rectStartY: 0
 }
 }
 ];

 function setCanvasImages() {
 let imgElem;
 for (let i = 0; i < sceneInfo[0].values.videoImageCount; i++) {
 imgElem = new Image();
 imgElem.src = `./video/001/IMG_${6726 + i}.JPG`;
 sceneInfo[0].objs.videoImages.push(imgElem);
 }

 let imgElem2;
 for (let i = 0; i < sceneInfo[2].values.videoImageCount; i++) {
 imgElem2 = new Image();
 imgElem2.src = `./video/002/IMG_${7027 + i}.JPG`;
 sceneInfo[2].objs.videoImages.push(imgElem2);
 }
 let imgElem3;
 for (let i = 0; i < sceneInfo[3].objs.imagePath.length; i++) {
 imgElem3 = new Image();
 imgElem3.src = sceneInfo[3].objs.imagePath[i];
 sceneInfo[3].objs.images.push(imgElem3);
 }
 }

 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})`;
 }

 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:
 let sequence = Math.round(calcValues(values.imageSequence, currentYOffset));
 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:
 let sequence2 = Math.round(calcValues(values.imageSequence, currentYOffset));
 objs.context.drawImage(objs.videoImages[sequence2], 0, 0);

 if (scrollRatio <= 0.5) {
 // in
 objs.canvas.style.opacity = calcValues(values.canvas_opacity_in, currentYOffset);
 } else {
 // out
 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:
 // 가로, 세로 모두 100%로 채우기 위한 세팅(계산 필요)
 const widthRatio = window.innerWidth / objs.canvas.width;
 const heightRatio = window.innerHeight / objs.canvas.height;
 let canvasScaleRatio;

 if (widthRatio <= heightRatio) {
 // 브라우저 width < 캔버스 width인 경우
 canvasScaleRatio = heightRatio;
 } else {
 // 브라우저 height < 캔버스 height 경우
 canvasScaleRatio = widthRatio;
 }
 objs.canvas.style.transform = `scale(${canvasScaleRatio})`;
 objs.context.drawImage(objs.images[0], 0, 0);

 // 캔버스 사이즈에 맞춰 가정한 innerWdth와 innerHeight
 const recalculatedInnerWidth = document.body.offsetWidth / canvasScaleRatio;
 const recalculatedInnerHeight = window.innerHeight / canvasScaleRatio;

 if (!values.rectStartY) {
 // values.rectStartY = objs.canvas.getBoundingClientRect().top;
 values.rectStartY = objs.canvas.offsetTop + (objs.canvas.height - objs.canvas.height * canvasScaleRatio) / 2;
 values.rect1X[2].end = values.rectStartY / scrollHeight;
 values.rect2X[2].end = values.rectStartY / scrollHeight;
 }

 const whiteRectWidth = recalculatedInnerWidth * 0.15;
 values.rect1X[0] = (objs.canvas.width - recalculatedInnerWidth) / 2;
 values.rect1X[1] = values.rect1X[0] - whiteRectWidth;
 values.rect2X[0] = values.rect1X[0] + recalculatedInnerWidth - whiteRectWidth;
 values.rect2X[1] = values.rect2X[0] + whiteRectWidth;

 // 좌우 화이트박스 그리기
 // objs.context.fillRect(values.rect1X[0], 0, parseInt(whiteRectWidth), objs.canvas.height);
 // objs.context.fillRect(values.rect2X[0], 0, parseInt(whiteRectWidth), objs.canvas.height);
 objs.context.fillRect(
 parseInt(calcValues(values.rect1X, currentYOffset)),
 0,
 parseInt(whiteRectWidth),
 objs.canvas.height
 );
 objs.context.fillRect(
 parseInt(calcValues(values.rect2X, currentYOffset)),
 0,
 parseInt(whiteRectWidth),
 objs.canvas.height
 );

 break;
 }
 }


 function scrollLoop() {
 enterNewScene = false;
 prevScrollHeight = 0;
 for (let i = 0; i < currentScene; i++) {
 prevScrollHeight += sceneInfo[i].scrollHeight;
 }
 if (yOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight) {
 enterNewScene = true;
 currentScene++;
 document.body.setAttribute("id", `show-scene-${currentScene}`);
 }
 if (yOffset < prevScrollHeight) {
 if (currentScene === 0) return; // 브라우저 바운스 효과로 인해 마이너스가 되는 것을 방지(모바일)
 enterNewScene = true;
 currentScene--;
 document.body.setAttribute("id", `show-scene-${currentScene}`);
 }
 if (enterNewScene) return;
 playAnimation();
 }

 window.addEventListener("scroll", () => {
 yOffset = window.pageYOffset;
 scrollLoop();
 });
 // window.addEventListener("DOMContentLoadded", setLayout);
 window.addEventListener("load", () => {
 setLayout();
 sceneInfo[0].objs.context.drawImage(sceneInfo[0].objs.videoImages[0], 0, 0);

 });
 window.addEventListener("resize", setLayout);
})();</code></pre>

vzb0011159

Bài viết