(티스토리) 사이드바 배경음악 컨트롤박스 꾸미기 완료

오늘은 현제 제 블로그 사이드바에 있는 배경음악 컨트롤박스를 꾸며보았습니다. 미넴 스킨에 기본적으로 배경음악 컨트롤 박스가 있는데, 미루고 미루다 이번에 디자인을 변경했습니다.

사이드바 배경음악 컨트롤박스 꾸미기

원래 미넴 스킨에 있는 기본 디자인은 이랬습니다.

심플하고 이쁘지만, 제가 원하는 디자인과는 조금 거리가 멀었어요!

 

그래서 시작한 디자인 변경 프로젝트(?)

 

일단 원하는 큰 틀은 컨트롤 박스 위에 CD가 있고, 그게 돌아가면 좋겠다고 생각했고 바로 실행에 들어갔습니다.

전체적인 큰 틀을 완성시키고, 애매했던 볼륨 조절 버튼을 Adobe Illustrator로 만들어서 넣어줬습니다. 그리고 원래는 재생 유무에 상관없이 CD가 계속 Spin 했었습니다. 저는 이게 조금 걸리더라고요.

 

그래서 재생 버튼이 눌리면 CD도 Spin 되도록 CSS와 스크립트 부분을 재 수정했습니다. 

 

또, 라이드 모드일 때와 다크 모드일 때의 색상을 수정해주고, 뭔가 밋밋해서 레코드처럼 꾸며주기 위해 Record Arm(?) 부분도 넣어 이것 또한 재생 버튼이 눌리면 위아래로 rotate 되도록 Keyframe을 추가해줬습니다.

디자인은 이렇게 완성됐고, 플레이 화면은 아래와 같아요!

---

음.. 아직도 고민인게 에어팟이나 Record Arm 부분을 제거해야 할지 말아야 할지 고민입니다... 혹시 추가 수정이나 아이디어가 있으시다면 댓글 부탁드립니다. 

 

혹시 미넴스킨이 관심 있으시다면, 아래 링크에서 다운받으실 수 있습니다.

미리 알았다면 좋았을 텐데

 

읽어주셔서 감사합니다 🤟