티스토리 제목 썸네일 애니매이션 효과 만드는 법
목차
오늘은 포스팅 한 썸네일이 좌우로 흔들리는 애니메이션 효과를 넣는 법을 적용해보려고 합니다.
처음부터 그대로 따라 하셔서 나만의 티스토리를 더욱 다채롭게 꾸며보세요.
티스토리 제목 썸네일 애니매이션 효과 만들기
제목 썸네일 애니매이션 효과를 만들기 위해서는 가장 먼저 이용하고 있는 스킨의 이름을 알아야합니다.
ㄱ. 본인이 작성한 글의 제목을 마우스 오른쪽 버튼으로 클릭한 후 "검사" 클릭
ㄴ. 오른쪽에 나타난 창에서 2번 부분이 본인의 스킨의 제목입니다.
ㄷ. .post-item .title 을 복사해서 메모장에 옮겨둡니다.
※ 본인의 스킨에 따라 달라질 수 있으니 본인 것 사용
애니메이션 효과 CSS 코드 적용하기
ㄱ. 티스토리 관리자 페이지 들어가기
ㄴ. 꾸미기 ▶ 스킨 편집 ▶ html편집 ▶ CSS
ㄷ. 아래의 코드를 복사해서 CSS 맨 밑에 그대로 붙여 넣기를 해주시면 됩니다.
/*썸네일 애니메이션*/
@keyframes post-ani {
25% {
transform: rotate(2deg) scale(1.01);
}
50% {
transform: rotate(0deg) scale(1);
}
75% {
transform: rotate(-2deg) scale(1.01);
}
}
/*썸네일 애니메이션 끝*/
TIP : 본인이 조금씩 변경을 하며 원하는 만큼 값을 변경해 주셔도 됩니다.
1.deg의 숫자는 클수록 움직이는 방향이 늘어납니다.
2. scale은 이미지의 크기가 확대가 되도록 하는 기능을 합니다.
1. 흔들리는 썸네일 애니메이션 적용
ㄱ. Ctrl + F 키를 이용해서 맨 처음 메모장에 저장해 둔 .post-item .title 을 검색합니다.
ㄴ. 다음의 코드를 해당 위치에 넣어 줍니다.
/*썸네일 애니메이션*/
.list-type-thumbnail .post-item:hover img {
opacity: 0.9;
animation: post-ani 0.8s linear 1;
}
/*썸네일 애니메이션 끝*/
여기까지 코드를 그대로 넣어준 후 적용 ▶ 새로고침 버튼을 클릭해 준 뒤 마우스를 각 제목에 가져가면 흔들리는 제목 효과를 보실 수 있습니다.
2. 확대되는 제목 애니메이션 적용 방법
ㄱ. 위의 흔들리는 제목이 아닌 확대되는 제목 애니메이션을 적용하고 싶으시다면 다음과 같은 코드를 적용하면 됩니다.
/*움직이는 이미지 2*/
.post-item .title:hover title {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
}
/*움직이는 이미지 2 끝*/마무리
다양한 티스토리 제목 애니메이션 효과를 통해 가시성 좋은 티스토리를 만들어보세요.
