Jekyll Blogging 3

LeeMir, 13 December 2020

Snowflake on Website!!

12월 13일, 서울에 첫눈이 내렸다.

카카오톡에서는 눈이 내리면 채팅방에 눈이 내리는 기능이 있다.

눈을 내 블로그에서도 보고 싶어 이 깃허브 블로그와 티스토리 블로그에도 눈을 내리게 했다.

만약 눈 내리는 애니메이션을 JS로 구현할 경우, 눈이 이론상 무한으로 내려야하기 때문에 메모리를 많이 잡아먹다가 문제가 생길 수 있으므로 CSS로 구현하는 게 좋다고 생각한다.

pajasevi라는 개발자가 깃허브에 공유해놓은 CSSnowflakes가 있어서 전적으로 이것을 이용하였다.

(깃허브 블로그에서는 그대로 사용했고, 티스토리 블로그에서는 살짝 수정해서 사용했다.)

snippet.html이라는 문서가 있는데, 이 문서를 열어서 코드를 보면 된다.

원리는 눈모양의 특수문자를 CSS transform을 이용해 코딩한 것이다.

style 태그 안에서 color로 눈 색깔을 수정할 수 있고, font-size로 눈 크기도 수정할 수 있다.

@-webkit-keyframes 부분에 끝으로 가면 .snowflake:nth-of-type(n){}형식으로 이어져있는데, 똑같이 붙이되 안에 숫자는 바꿔서 원하는 개수만큼 이어붙이고 밑에서 div를 늘린 개수만큼 똑같이 늘려주면 된다.

본인이 꾸미고 싶은 웹사이트의 메인 html에서 head 안에 넣어놓으면 잘 작동한다.

내 깃허브 블로그 같은 경우에는 모든 페이지가 default 레이아웃을 기초로 하기 때문에(다른 레이아웃도 default를 깔고 감) default.html에 넣었다.

모두 웹사이트에도 겨울옷을 입혀보자!