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

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

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

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

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

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

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

(?)

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

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

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

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

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

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