애플 스크롤 이미지 애니메이션 무작정 따라해보기

2022년 04월 11일 · #기술 #후기

애플 아이팟 광고 페이지(https://www.apple.com/kr/airpods-pro/)를 보고

스크롤에 따라 이미지가 바뀌는 게 신기했다. 흑인이 머리넘기는 애니메이션이 재밌어 보여서 한번 따라 만들어보았다.

하는김에 텍스트가 스크롤에 따라 바뀌는것도 skrollr이란 library를 받아서 구현해보았다.

canvas라는 css태그와 javascript library를 처음 써봤다. canvas안에 image를 가운데 정렬하는 것을 찾아보는게 좀 오래걸렸다.

*** 부족한점: 새로고침을 하거나 처음 파일을 불러올때 텍스트가 잠깐 보였다 사라진다. 스크롤 중간에서 새로고침을 해도 같은 현상이 발생한다.

*** 버그: 흑인이 머리 넘기는 이미지를 불러올때 없는 인덱스인 132번째를 불러와 404에러가 뜬다. 고쳐야할 부분이다. (수정완료 - 간단하게 Count를 132 -> 131로 바꿔 해결했다.)