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

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

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

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

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

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

Kiss Me ♥에게 댓글 남기기 댓글 취소

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

(?)

  1. 이건 예전 사용하던
    베가아이언2 에서 본 모습이예요
    https://imgur.com/tT7WMdV.mp4

    1. 영상도 촬영해주시고, 감사합니다 ㅎㅎ
      영상을 촬영 중이라 그런 건지 잡렉이 꽤 보이네요.
      심지어 아이언 2에선 애니메이션이 이상한 타이밍에 시작돼서 처음 이미지 전환은 이상하게까지 되네요 ㅠㅠ 수정해보겠습니다.

  2. 제 폰에서 본 모습입니다 🙂
    https://imgur.com/14dirPp.mp4

  3. 모바일에서만 동작하네요 ^^

    그렇게 렉이 심하지 않은데.., 왼쪽이든 오른쪽이든 턴 할때 이미지를 변경하면 렉이 조금 더 줄지 않을까싶네요
    보니까 이미지 변경되고 턴 찍으러 가는사이에 렉이 생기는걸로 봐서...,

    1. 넵 사진이 화면을 꽉 채우지 못하는 모바일에서만 재생되도록 해뒀습니다.
      의견 감사하지만, 끝으로 가는 시점에 이미지를 변경해도 불투명도를 조절하며 이미지를 움직이려다 보니 생기는 렉이라, 어느 시점에 전환하건 큰 차이는 없더라고요. ㅠㅠ