inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

canvas에 마지막 이미지가 나타났다가 시작합니다.

198

BUBBLING C

작성한 질문수 1

0

안녕하세요 수업내용 토대로 새로운 웹사이트 제작중입니다.
canvas로 영상을 이미지화하여 스크롤할때마다 이미지가 영상처럼 돌아가게 적용했는데요.
문제는 첫 시작 이미지가 마지막 이미지가 보였다가 시작합니다.
빠르게 스크롤하면 나타나고 천천히 하면 이런 현상이 나타나지 않습니다ㅠㅠ
이미지파일 순서대로 넣었고 소스도 수업내용과 동일합니다. 이유가 뭘까요?
시작할때 오퍼시티를 줘서 흐려놓긴 했는데 조금씩 보여서 찝찝합니다.
두번째 섹션이 시작하자마자 이미지를 그리고 있습니다. 그래서 첫번째 섹션에서 이미지를 불러오게도 해봤는데 소용이 없습니다..

javascript HTML/CSS svg 인터랙티브-웹 웹 디자인 클론코딩

답변 1

0

BUBBLING C

문제 해결했습니다!

  왜 해결된건지 잘 모르겠지만 저랑 똑같은 이슈 격는분들을 위해 남겨놔요.

첫번째 섹션에서 이미지를 불러온게 잘못이였습니다.

첫번째 섹션에서 if(scrollRatio > 0.8){} << 이 안에다 두번째 섹션 이미지를 불러오게 하니까 해결이 됐습니다. 

이미지 배경 문의

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

327

2

게속 오류떠서 글 작성해봐요....

0

531

2

Vanilla JavaScript로 SPA 만드는 자료 혹은 선택 기준을 추천해주실 수 있으신가요?

1

500

1

특정 타이밍 스크롤 애니메이션 적용하기 섹션 수강중입니다.

0

464

2

[#svg, #이미지프레임과 텍스트 싱크] 스크롤 값에 움직이는 svg path, 이미지프레임과 텍스트 싱크 맞추는 것, 2가지 질문이 있습니다.

0

460

2

페이지가 처음 로딩 되었을 때 애니메이션 처리가 되지 않는 느낌입니다

0

444

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