최종 수정일 :
(1년 전)
Kiss me 님의 추천으로 만들어본 슬라이드 쇼입니다.
대략 2시간가량의 삽질 끝에 성공했네요 ㅠㅠ
처음엔 background-position을 옮기는 간단한 방법을 사용했는데, background-position을 animation으로 움직여버리면 repaint가 발생하며 렉이 꽤 많이 생깁니다.
아마 어지간한 게이밍 PC가 아니라면 꽤 거슬릴 정도로 생길 겁니다.
어떻게 하면 기기에 부담을 안 주고 저런 애니메이션을 표시할 수 있을까 생각하다 img 태그를 사용하고 translateX를 이용해 이미지를 옮기면 되지 않을까 하는 생각이 들어 그렇게 진행해봤습니다.
뭐 그러고도 PC에선 이미지가 이상하게 표시되는 문제가 있어 미디어 쿼리를 이용해 기기 너비가 1100px보다 크거나, 기기가 16+n:9의 비를 가졌으면 이미지를 화면에 꽉 채우고 애니메이션이 제거되도록 했습니다.
렉을 최대한 잡는다고 잡았는데도 아직 잡렉이 남아있어 어쩔지 고민입니다 ㅠㅠ
분명 예쁜 기능은 맞는데, 하필 성능이 PC에 비하면 한참 모자란 휴대폰에서만 재생돼야 하는 애니메이션이라니…
