선생님 안녕하세요!
259
radbenet
작성한 질문수 2
0
선생님 안녕하세요
canvas_opacity_out 실행되는 시점에
main.js:299 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'. at playAnimation (main.js:299) at scrollLoop (main.js:389) at main.js:400
에러가 출력 됩니다.
혼자 해결해보려고 완성본 파일도 찾아보고 했지만
해결이 어려워 질문 드립니다.
감사합니다.
(() =>
{
let yOffset = 0 // window.pageYOffset 대신 사용할 변수
let prevScrollHeight = 0 // 현재 스크롤 위치(yOffset)보다 이전에 위치한 스크롤 섹션들의 스크롤 높이값의 합
let currentScene = 0 // 현재 활성하된(눈 앞에 보고 있는 ) 화면
let enterNewScene = false // 새로운 scene이 시작되는 순간 false
const sceneInfo =
[
{
// 0
type: 'sticky',
heightNum : 5, // 브라우저 높이의 5배로 scrollHeight 세팅
scrollHeight: 0,
objects:
{
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: 578,
imageSequence: [0, 577],
canvas_opacity: [1,0,{ start: 0.9 , end: 1}],
messageA_opacity_in: [0, 1, { start: 0.05, end: 0.15 }],
messageB_opacity_in: [0, 1, { start: 0.25, end: 0.29 }],
messageC_opacity_in: [0, 1, { start: 0.45, end: 0.5 }],
messageD_opacity_in: [0, 1, { start: 0.7, end: 0.85 }],
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.1, end: 0.2 }],
messageB_opacity_out: [1, 0, { start: 0.3, end: 0.31}],
messageC_opacity_out: [1, 0, { start: 0.55, end: 0.6 }],
messageD_opacity_out: [1, 0, { start: 0.9, end: 1.0 }],
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,
scrollHeight: 0,
objects:
{
container: document.querySelector('#scroll-section-1'),
content: document.querySelector('#scroll-section-1 .description')
}
},
{
// 2
type: 'sticky',
heightNum : 5,
scrollHeight: 0,
objects:
{
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: 622,
imageSequence: [0, 621],
canvas_opacity_in: [0,1,{ start: 0, end: 0.1}],
canvas_opacity_out: [1,0,{ start: 0.9, end: 0.95}],
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.6, end: 0.65 }],
pinC_scaleY: [0.5, 1, { start: 0.87, end: 0.92 }],
pinB_opacity_in: [0, 1, { start: 0.6, end: 0.65 }],
pinC_opacity_in: [0, 1, { start: 0.87, end: 0.92 }],
pinB_opacity_out: [1, 0, { start: 0.68, end: 0.73 }],
pinC_opacity_out: [1, 0, { start: 0.95, end: 1 }]
}
},
{
// 3
type: 'sticky',
heightNum : 5,
scrollHeight: 0,
objects:
{
container: document.querySelector('#scroll-section-3'),
canvasCaption: document.querySelector('.canvas-caption')
},
values:
{
}
}
]
const setCanvasImages = () =>
{
let imgElem
for( let i = 0; i < sceneInfo[0].values.videoImageCount; i++)
{
imgElem = new Image()
imgElem.src =`./video/IMG_${5555 + i}.jpg`
sceneInfo[0].objects.videoImages.push(imgElem)
}
let imgElem2
for( let i = 0; i < sceneInfo[0].values.videoImageCount; i++)
{
imgElem2 = new Image()
imgElem2.src =`./video/IMG_${6134 + i}.jpg`
sceneInfo[2].objects.videoImages.push(imgElem2)
}
}
setCanvasImages()
const setLayout = () =>
{
// 각 스크롤 섹션의 높이 세팅
for( let i = 0; i < sceneInfo.length; i++ )
{
if( sceneInfo[i].type === 'sticky')
{
sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight
sceneInfo[i].objects.container.style.height = `${sceneInfo[i].scrollHeight}px`
}
else if( sceneInfo[i].type === 'normal')
{
sceneInfo[i].scrollHeight = sceneInfo[i].objects.container.offsetHeight
}
sceneInfo[i].objects.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].objects.canvas.style.transform = `translate3d(-50%, -50%, 0) scale(${heightRatio})`
sceneInfo[2].objects.canvas.style.transform = `translate3d(-50%, -50%, 0) scale(${heightRatio})`
}
const 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
}
const playAnimation = () =>
{
const objects = sceneInfo[currentScene].objects
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))
objects.context.drawImage(objects.videoImages[sequence], 0, 0)
objects.canvas.style.opacity = calcValues(values.canvas_opacity, currentYOffset)
if (scrollRatio <= 0.22)
{
// in
objects.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset);
objects.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_in, currentYOffset)}%, 0)`;
}
else
{
// out
objects.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset);
objects.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_out, currentYOffset)}%, 0)`;
}
if (scrollRatio <= 0.42)
{
// in
objects.messageB.style.opacity = calcValues(values.messageB_opacity_in, currentYOffset);
objects.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_in, currentYOffset)}%, 0)`;
}
else
{
// out
objects.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset);
objects.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_out, currentYOffset)}%, 0)`;
}
if (scrollRatio <= 0.62)
{
// in
objects.messageC.style.opacity = calcValues(values.messageC_opacity_in, currentYOffset);
objects.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_in, currentYOffset)}%, 0)`;
}
else
{
// out
objects.messageC.style.opacity = calcValues(values.messageC_opacity_out, currentYOffset);
objects.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_out, currentYOffset)}%, 0)`;
}
if (scrollRatio <= 0.82)
{
// in
objects.messageD.style.opacity = calcValues(values.messageD_opacity_in, currentYOffset);
objects.messageD.style.transform = `translate3d(0, ${calcValues(values.messageD_translateY_in, currentYOffset)}%, 0)`;
}
else
{
// out
objects.messageD.style.opacity = calcValues(values.messageD_opacity_out, currentYOffset);
objects.messageD.style.transform = `translate3d(0, ${calcValues(values.messageD_translateY_out, currentYOffset)}%, 0)`;
}
break
case 2:
let sequence2 = Math.round(calcValues(values.imageSequence, currentYOffset))
objects.context.drawImage(objects.videoImages[sequence2], 0, 0)
if (scrollRatio <= 0.5)
{
// in
objects.canvas.style.opacity = calcValues(values.canvas_opacity_in, currentYOffset)
}
else
{
// out
objects.canvas.style.opacity = calcValues(values.canvas_opacity_out, currentYOffset)
}
if (scrollRatio <= 0.25)
{
// in
objects.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset);
objects.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_in, currentYOffset)}%, 0)`;
}
else
{
// out
objects.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset);
objects.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_out, currentYOffset)}%, 0)`;
}
if (scrollRatio <= 0.57)
{
// in
objects.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_in, currentYOffset)}%, 0)`;
objects.messageB.style.opacity = calcValues(values.messageB_opacity_in, currentYOffset);
objects.pinB.style.transform = `scaleY(${calcValues(values.pinB_scaleY, currentYOffset)})`;
}
else
{
// out
objects.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_out, currentYOffset)}%, 0)`;
objects.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset);
objects.pinB.style.transform = `scaleY(${calcValues(values.pinB_scaleY, currentYOffset)})`;
}
if (scrollRatio <= 0.83)
{
// in
objects.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_in, currentYOffset)}%, 0)`;
objects.messageC.style.opacity = calcValues(values.messageC_opacity_in, currentYOffset);
objects.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleY, currentYOffset)})`;
}
else
{
// out
objects.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_out, currentYOffset)}%, 0)`;
objects.messageC.style.opacity = calcValues(values.messageC_opacity_out, currentYOffset);
objects.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleY, currentYOffset)})`;
}
break
case 3:
break
}
}
const 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('load', () =>
{
setLayout()
sceneInfo[0].objects.context.drawImage(sceneInfo[0].objects.videoImages[0], 0, 0)
})
window.addEventListener('resize', setLayout)
})()
답변 1
이미지 배경 문의
0
81
1
[크로스브라우징] safari에서 동영상 영역 미노출
0
123
1
항상 궁금했는데 크림슨 컬러 선택하셨을때 활용했던 사이트 좀 알려주세요~
0
130
2
vue강의는안하시나요?!
0
124
1
스크롤 속도에 따른 messageA_opacity_out
0
130
1
drawImage(objs.videoImages[sequence], 0, 0); error
0
94
1
선생님 캔버스 width 크기는 이미지 크기에맞게 해줘야하나요?
0
137
0
선생님 안녕하세요. 혹시 메인개발(?)분야가 뭔지 궁금합니다.
0
219
1
React에서 load 상태를 어떻게 감지할 수 있을까요?
0
699
1
[섹션7-3: 버그수정 2] tempYOffset 오류
0
207
1
스크롤할 때 캔버스로 하신 이유가 있으신가요? 그냥 성능 떄문에 캔버스로 하신건가요?
0
326
2
게속 오류떠서 글 작성해봐요....
0
531
2
Vanilla JavaScript로 SPA 만드는 자료 혹은 선택 기준을 추천해주실 수 있으신가요?
1
500
1
특정 타이밍 스크롤 애니메이션 적용하기 섹션 수강중입니다.
0
464
2
[#svg, #이미지프레임과 텍스트 싱크] 스크롤 값에 움직이는 svg path, 이미지프레임과 텍스트 싱크 맞추는 것, 2가지 질문이 있습니다.
0
460
2
페이지가 처음 로딩 되었을 때 애니메이션 처리가 되지 않는 느낌입니다
0
443
1
섹션2 번째, opacity=0 되지 않고 잔상이 남습니다.
0
538
1
원래 쿼리셀렉터에서는 띄워쓰기 하면안되나요?
0
605
2
라이브러리 질문
1
419
2
translateY대신 애플에서 사용한 것 처럼 matrix로 scale의 크기를 주려고 하는데
0
416
1
[스크롤 높이 세팅] scrollHeight값이 3990아닌 4645로만 나오는데 뭐가 문제일까요? ㅠㅠ
0
606
2
scrollLoop 함수 질문
0
482
2
도메인 웹호스팅시 이미지가 안 뜨는데 누가 좀 알려주세요ㅠㅜ
0
1242
2
load 이벤트시 첫 비디오 이미지가 뜨네요.
0
512
2