인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

pos7271님의 프로필 이미지
pos7271

작성한 질문수

애플 웹사이트 인터랙션 클론!

비디오 인터랙션 적용 2

콘솔창에 에러나는데 왜 이러는 걸까요 ㅠㅠ

작성

·

274

0

(() => {

    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,
                imageSequenc: [0299],
                messageA_opacity_in: [01, { start: 0.1end: 0.2 }],
                messageB_opacity_in: [01, { start: 0.3end: 0.4 }],
                messageC_opacity_in: [01, { start: 0.5end: 0.6 }],
                messageD_opacity_in: [01, { start: 0.7end: 0.8 }],
                messageA_translateY_in: [200, { start: 0.1end: 0.2 }],
                messageB_translateY_in: [200, { start: 0.3end: 0.4 }],
                messageC_translateY_in: [200, { start: 0.5end: 0.6 }],
                messageD_translateY_in: [200, { start: 0.7end: 0.8 }],
                // 20=> translateY를 20%만큼 조정, %는 밑에 playAnimation()에서 붙여줄 거임
                messageA_opacity_out: [10, { start: 0.25end: 0.3 }],
                messageB_opacity_out: [10, { start: 0.45end: 0.5 }],
                messageC_opacity_out: [10, { start: 0.65end: 0.7 }],
                messageD_opacity_out: [10, { start: 0.85end: 0.9 }],
                messageA_translateY_out: [0, -20, { start: 0.25end: 0.3 }],
                messageB_translateY_out: [0, -20, { start: 0.45end: 0.5 }],
                messageC_translateY_out: [0, -20, { start: 0.65end: 0.7 }],
                messageD_translateY_out: [0, -20, { start: 0.85end: 0.9 }]
            }
        },
            //1
        {
            type: 'normal',
            // heightNum: 5, // type normal에서는 필요없음
            scrollHeight: 0,
            objs: {
                container: document.querySelector('#scroll-section-1')
            }
        },
            //2
        {
            type: 'sticky',
            heightNum: 5// 브라우저 높이의 5배로 scrollHeight 세팅
            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'),
            },
            values: {
                messageA_translateY_in: [200, { start: 0.15end: 0.2 }],
                messageB_translateY_in: [300, { start: 0.6end: 0.65 }],
                messageC_translateY_in: [300, { start: 0.87end: 0.92 }],
                messageA_opacity_in: [01, { start: 0.25end: 0.3 }],
                messageB_opacity_in: [01, { start: 0.6end: 0.65 }],
                messageC_opacity_in: [01, { start: 0.87end: 0.92 }],
                messageA_translateY_out: [0, -20, { start: 0.4end: 0.45 }],
                messageB_translateY_out: [0, -20, { start: 0.68end: 0.73 }],
                messageC_translateY_out: [0, -20, { start: 0.95end: 1 }],
                messageA_opacity_out: [10, { start: 0.4end: 0.45 }],
                messageB_opacity_out: [10, { start: 0.68end: 0.73 }],
                messageC_opacity_out: [10, { start: 0.95end: 1 }],
                pinB_scaleY: [0.51, { start: 0.6end: 0.65 }],
                pinC_scaleY: [0.51, { start: 0.87end: 0.92 }]
            }
        },
            //3
        {
            type: 'sticky',
            heightNum: 5// 브라우저 높이의 5배로 scrollHeight 세팅
            scrollHeight: 0,
            objs: {
                container: document.querySelector('#scroll-section-3'),
                canvasCaption: document.querySelector('.canvas-caption')
            },
            values: {

            }
        }
    ];

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

    function setLayout() {
        // 각 스크롤 섹션의 높이 세팅
        for (let i = 0i < sceneInfo.lengthi++) { 
            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 = 0i < sceneInfo.lengthi++) {
            totalScrollHeight += sceneInfo[i].scrollHeight;
            if(totalScrollHeight >= yOffset) {
                currentScene = i;
                break;            
            }
        }
        document.body.setAttribute('id'`show-scene-${currentScene}`);
    }

    function calcValues(valuescurrentYOffset) {
         let rv;
        //  현재 씬(스크롤섹션)에서 스크롤 된 범위를 0~1 사이의 비율로 구하기
        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 = yOffset / 현재 씬의 scrollHeight;
        const scrollRatio = currentYOffset / scrollHeight;

        switch (currentScene) {
            case 0:
                // console.log('0 play');
                let sequence = Math.round(calcValues(values.imageSequenccurrentYOffset));
                objs.context.drawImage(objs.videoImages[sequence], 00);

                if (scrollRatio <= 0.22) {
                    // in
                    objs.messageA.style.opacity = calcValues(values.messageA_opacity_incurrentYOffset);
                    objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_incurrentYOffset)}%, 0)`;
                } else {
                    // out
                    objs.messageA.style.opacity = calcValues(values.messageA_opacity_outcurrentYOffset);
                    objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_outcurrentYOffset)}%, 0)`;
                }
    
                if (scrollRatio <= 0.42) {
                    // in
                    objs.messageB.style.opacity = calcValues(values.messageB_opacity_incurrentYOffset);
                    objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_incurrentYOffset)}%, 0)`;
                } else {
                    // out
                    objs.messageB.style.opacity = calcValues(values.messageB_opacity_outcurrentYOffset);
                    objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_outcurrentYOffset)}%, 0)`;
                }
    
                if (scrollRatio <= 0.62) {
                    // in
                    objs.messageC.style.opacity = calcValues(values.messageC_opacity_incurrentYOffset);
                    objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_incurrentYOffset)}%, 0)`;
                } else {
                    // out
                    objs.messageC.style.opacity = calcValues(values.messageC_opacity_outcurrentYOffset);
                    objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_outcurrentYOffset)}%, 0)`;
                }
    
                if (scrollRatio <= 0.82) {
                    // in
                    objs.messageD.style.opacity = calcValues(values.messageD_opacity_incurrentYOffset);
                    objs.messageD.style.transform = `translate3d(0, ${calcValues(values.messageD_translateY_incurrentYOffset)}%, 0)`;
                } else {
                    // out
                    objs.messageD.style.opacity = calcValues(values.messageD_opacity_outcurrentYOffset);
                    objs.messageD.style.transform = `translate3d(0, ${calcValues(values.messageD_translateY_outcurrentYOffset)}%, 0)`;
                }
    
                break;

            case 2:
                // console.log('2 play');
                if (scrollRatio <= 0.32) {
                    // in
                    objs.messageA.style.opacity = calcValues(values.messageA_opacity_incurrentYOffset);
                    objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_incurrentYOffset)}%, 0)`;
                } else {
                    // out
                    objs.messageA.style.opacity = calcValues(values.messageA_opacity_outcurrentYOffset);
                    objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_outcurrentYOffset)}%, 0)`;
                }
    
                if (scrollRatio <= 0.67) {
                    // in
                    objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_incurrentYOffset)}%, 0)`;
                    objs.messageB.style.opacity = calcValues(values.messageB_opacity_incurrentYOffset);
                    objs.pinB.style.transform = `scaleY(${calcValues(values.pinB_scaleYcurrentYOffset)})`;
                } else {
                    // out
                    objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_outcurrentYOffset)}%, 0)`;
                    objs.messageB.style.opacity = calcValues(values.messageB_opacity_outcurrentYOffset);
                    objs.pinB.style.transform = `scaleY(${calcValues(values.pinB_scaleYcurrentYOffset)})`;
                }
    
                if (scrollRatio <= 0.93) {
                    // in
                    objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_incurrentYOffset)}%, 0)`;
                    objs.messageC.style.opacity = calcValues(values.messageC_opacity_incurrentYOffset);
                    objs.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleYcurrentYOffset)})`;
                } else {
                    // out
                    objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_outcurrentYOffset)}%, 0)`;
                    objs.messageC.style.opacity = calcValues(values.messageC_opacity_outcurrentYOffset);
                    objs.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleYcurrentYOffset)})`;
                }
    
                break;
    
            case 3:
                // console.log('3 play');
                break;
        }
    }
   
    function scrollLoop() {
        enterNewScene = false;
        prevScrollHeight = 0;
        for (let i = 0i < currentScenei++) {
            prevScrollHeight += sceneInfo[i].scrollHeight;
        }
        if (yOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight) {
            enterNewScene = true;
            currentScene ++;
            document.body.setAttribute('id'`show-scene-${currentScene}`);
        } if (yOffset < prevScrollHeight) {
            enterNewScene = true;
            if(currentScene === 0return// 브라우저 바운스 효과로 인해 마이너스가 되는 것을 방지 (모바일)
            currentScene --;
            document.body.setAttribute('id'`show-scene-${currentScene}`);
        }

        if (enterNewScenereturn;

        playAnimation();
    }

    window.addEventListener('scroll', () => {
        yOffset = window.pageYOffset;
        scrollLoop();
    });
    // window.addEventListener('DOMcontentLoaded', setLayout)
    // 이미지가 업로드 되기 전에 실행
    window.addEventListener('load'setLayout);
    window.addEventListener('resize'setLayout);
})();


답변 2

1

1분코딩님의 프로필 이미지
1분코딩
지식공유자

맨 끝에 setCanvasImages(); 를 실행해주는 부분이 빠졌습니다.
그래서 캔버스가 drawImage를 호출할 때 그려줄 이미지가 없어서 오류가 난 것이고요~
코드 끝에 아래처럼 실행해주세요-

...
...
window.addEventListener('resize', setLayout);
setCanvasImages();

0

pos7271님의 프로필 이미지
pos7271
질문자

감사합니다 쌤!!

pos7271님의 프로필 이미지
pos7271

작성한 질문수

질문하기