티스토리 블로그 꾸미기 : CSS로 움직이는 글자 효과 주기

티스토리 처음 할 때 스킨의 종류가 많고 해서 이것 저것 사용해 봤습니다. 

무수히 많은 임상실험(?) 결과 그중 반응형 #2가 가장 맘에 듭니다. 

군더더기 없이  깔끔한데다 반응형 웹 스킨이라 최신 유행을 잘 따라 가는 것 같아서 좋습니다.

그런데 많은 사람들이 쓰고 있군요. 나는 다른 사람이기 때문에 나만의 차별화(?)를 위해서 여기 저기 손대봅니다. 

그런데 손 대면 댈 수록 점점 누더기가 되어가고 디자인과 html 코드가 점점 산으로 가기 시작합니다.

역시 튜닝의 끝판왕은 순정이 맞습니다. 

며칠 또 사용하다 병이 도집니다. 또 손 보기 시작합니다. 

이번엔 틀을 깨지 않는 범위에서 최소한으로 손을 봤습니다.

제일먼저 사진을 바꿉니다. 

관리메뉴에서 html/css 편집들어가 header_default.jpg를 적당한 이미지로 바꿔줍니다. 

사이드 바를 펼쳤을 때 보여주는 정보를 최소화 했습니다.

공지사항 아카이브 등등 다 없애 버리니 보기 깔끔합니다. 

프로필 나오는 화면이 배경화면을 가려서 없애 버렸습니다. 

제가 보기엔 깔끔합니다.

그리고 웹상 보여지는 몇몇 구성요소를 과감히 삭제 했습니다.

너무 제거 해버리니 심심해 졌네요. 

이제 좀 추가를 하기 시작합니다. 

사이드 바 확장 버튼을 클릭하기 귀찮아서 마우스만 대면 확대 되고 축소 되도록 바꿨습니다.

script.js

이걸 다운 받아 올리면 됩니다. 

단 #2 스킨에서만  작동합니다. 혹시라도 쓰실 분들은 반드시 백업하시고 업로드 해주시길 바랍니다.

움직이는 에니메이션 CSS는 여기저거 많이 있습니다.. 

추천할 만한 소스는  http://ianlunn.github.io/Hover/ 여기걸 가지고 왔습니다.

개인용은 무료입니다

CSS 효과가 너무 많습니다.

이걸다 붙이려니 느려질것 같아서 필요한 부분만 발췌해서 넣으면 됩니다.

전 따로 더 단순하게 제작 해 봤습니다.

사이드 화면에 링크 걸린 부분에 마우스를 대면 떨림이 생기도록 했습니다.

당분간은 손을 안대도 될 것 같습니다.