배너 이미지

홈 화면 변경점

최종 수정일 : (2년 전)

Kiss me 님의 추천으로 만들어본 슬라이드 쇼입니다.
대략 2시간가량의 삽질 끝에 성공했네요 ㅠㅠ

처음엔 background-position을 옮기는 간단한 방법을 사용했는데, background-position을 animation으로 움직여버리면 repaint가 발생하며 렉이 꽤 많이 생깁니다.
아마 어지간한 게이밍 PC가 아니라면 꽤 거슬릴 정도로 생길 겁니다.

어떻게 하면 기기에 부담을 안 주고 저런 애니메이션을 표시할 수 있을까 생각하다 img 태그를 사용하고 translateX를 이용해 이미지를 옮기면 되지 않을까 하는 생각이 들어 그렇게 진행해봤습니다.

뭐 그러고도 PC에선 이미지가 이상하게 표시되는 문제가 있어 미디어 쿼리를 이용해 기기 너비가 1100px보다 크거나, 기기가 16+n:9의 비를 가졌으면 이미지를 화면에 꽉 채우고 애니메이션이 제거되도록 했습니다.

렉을 최대한 잡는다고 잡았는데도 아직 잡렉이 남아있어 어쩔지 고민입니다 ㅠㅠ

분명 예쁜 기능은 맞는데, 하필 성능이 PC에 비하면 한참 모자란 휴대폰에서만 재생돼야 하는 애니메이션이라니…


profile

이메일 주소는 공개되지 않습니다.

주의 : 비밀 댓글 사용 시 수정 기능을 이용할 수 있는 시간이 지나면 작성자도 내용 확인이 불가능합니다.
카카오페이 qr코드 모바일이시라면 클릭