180721 티스토리 스킨 #4 제작 일지

1. 인덱스 비디오 부분

간단하게 svg를 이용해서 꾸몄습니다. 자연스럽게 드로잉 되는 애니메이션을 만드느라 좀 헤맸네요

1
2
3
4
5
6
7
8
path {
  fill-opacity: 0;
  stroke: #000;
  stroke-width: 0.2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: draw 5s infinite linear;
}
Colored by Color Scripter
cs

1
2
3
4
5
6
7
8
9
10
11
@keyframes draw {
    50% {
        stroke-dashoffset: 0;
        fill-opacity: 1;
        fill: #1affff;
    }
    100% {
        stroke-dashoffset: 100;
        fill-opacity: 0;
}
 
cs

다만, 보는 시간이 굉장히 짧아 알아차리시는 분이 있을지 모르겠네요

2. 공유 버튼

제 휴대폰은 사이즈가 작지도 않을뿐더러 dpi까지 낮춰놔서 모든 버튼이 한 번에 보였으나, 어지간한 휴대폰은 네 개가 한 번에 보이질 않아서 잘 쓰이지 않는 구글+가 사라지도록 임시방편을 세웠습니다.

3. fontawesome 삭제

아이콘의 추가가 간편하고, 지속적인 업데이트가 이뤄지는 건 부정할 수 없는 fontawesome의 장점입니다. 하지만 안 그래도 불러올 게 많은 스킨인데 계속 fontawesome을 사용하는 건 로딩 시간에 악영향을 많이 끼치고. 로고에 사용할 또 다른 폰트를 불러오는 데 걸리는 시간도 무시를 못한다는 점에서 아이콘폰트를 제작하게 됐습니다.

간만에 일러스트레이터가 일하는 계기가 됐네요.

4. 댓글 / 방명록 정렬 버튼