트위치 스트리머 _밤새 님의 트게더입니다.

트게더 둘러보니 배경에 뭔가 떨어지게 하는 게 유행이더라고요.
별이 배경에 떨어지는 걸 원하셔서 남들은 어떻게 해뒀나 보니 죄다 background-position을 움직이는 애니메이션을 이용했더라고요.

1초에 수십 번씩 repaint하는 건 좀 아닌 것 같아 예전과 마찬가지로 ::before, ::after 두 pseudo element를 활용해 transform: translate()을 이용해 별이 떨어지게 해뒀습니다.
깔끔한 애니메이션을 위해 화면 크기의 4배가 되는 별을 그려야 하긴 하지만, background-position을 계속 수정하는 것보단 낫지 않을까 싶네요.

사이드바엔 sticky position을, 위로 가기 버튼을 누르면 부드럽게 올라가는 기능을 추가했습니다.
외에도 제목이나 프로필 사진 등에 마우스를 올렸을 때 크기를 조금 확대하는 애니메이션을 추가했습니다.

profile

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

(?)

  • Kiss Me ♥

    별이 내리는 모습이 이쁘네요 🙂
    마샬님 블로그도 눈 내리는거 이뻤는데.. 아쉬워요..

    https://t1.daumcdn.net/cfile/tistory/99C10B455DEE20B014?original

    트게더란 곳이 어떤곳인지 몰라, 들어가서 여기저기 둘러보는데
    하단에보면 트위치에서 운영하는 사이트는 아니라고 하고
    dc갤러리처럼 다양한 게시판들이 있네요~
    나중에 좀 더 천천히 둘러봐야겠어요 🙂

    1. 그냥 인터넷 방송하시는 분들 팬카페라 생각하시면 편하지 않을까 싶네요.
      이유는 모르겠는데 아이유 트게더도 있더라고요 ㅋㅋㅋ

      https://marshall-storage.tistory.com/attachment/cfile22.uf@99C8CE445DEE41E40A0632.mp4

      예전에 홈 화면에 좌우로 움직이는 사진 있던 시절에 보내주신 영상 보면 꽤 괜찮은 휴대폰 같던데 눈 렌더링은 왜 못하는지 모르겠네요 😥
      조금 더 최적화를 열심히 해보고 성공하면 다시 적용해보겠습니다.