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

자꾸 반복된 질문 드려 죄송합니다.

애플 맥북 사이트를 보니 gif가 아니라 캔버스에 mp4를 반복재생하는 방법을 사용하고 있더라고요. 그래서 강사님

https://www.youtube.com/watch?v=p8TsTUJj-kY&t=389s&ab_channel=1%EB%B6%84%EC%BD%94%EB%94%A9

이 사이트에 나와있는 방법 참고해서 이미지블렌드캔버스 부분에 코드 적용해보았는데 첫번째 캔버스가 sticky로 바뀐이후에도 아무런 반응이 없더라고요 ㅠㅠ. 이부분 어떻게 해결해야하는지 궁금합니다.

코드 첨부합니다.

c참고로 콘솔창에서 에러가 생기진 않습니다!

아무래도 addEventListener부분이 문제인 것 같아요..

 if (scrollRatio < values.rect1_x[2].end) {
          step = 1;
          console.log("step1");
          obj.canvas.classList.remove("sticky-canvas");
        } else {
          step = 2;
          console.log("step2");
          //이미지 블렌드
          //imageBlendY :[0, 0, { start: 0, end: 0 }];

          const owlVideo = document.querySelector(".owl-video");
          owlVideo.addEventListener("canplaythrough", render);

          function render() {
            obj.context.drawImage(owlVideo, 0, 0);
            requestAnimationFrame(render);
          }

          obj.canvas.classList.add("sticky-canvas");
          obj.canvas.style.top = `${
            -(obj.canvas.height - obj.canvas.height * canvasScaleRatio) / 2
          }px`;
        }

        break;
    }