블로그 배경에 애니메이션 효과주기
17.12.08 기준
http://htmlhomies.tumblr.com/fall31 <--- 링크를 눌러 이동
제 블로그에 적용되어있는 효과랍니다. (눈송이 효과)
블로그에 애니매이션 효과를 넣어서 꾸미는 방법을 알려드릴께요~
우선, 아래 샘플 보러가기를 눌러서 마음에 드는 애니메이션을 선택해주세요
마음에 드시는 애니메이션이 있으면 스크립트 드레그 하여 복사하기! Ctrl + C
샘플페이지에 있는 스크립트를 복사하셔도 되고 본문에 있는 스크립트를 복사하셔도 되용~
하트 내리는 애니메이션
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/54/54797/2/parts.js"></script> <-- 스크립트
비눗방울 내리는 애니메이션
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/49/49654/15/parts.js"></script>
비 내리는 애니메이션
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/52/52903/7/parts.js"></script>
꽃, 나뭇잎 애니메이션
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/49/49060/21/parts.js"></script>
비 내리는 애니메이션 - 가늘고 긴 빗방울
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/48/48251/866/parts.js"></script>
비 내리는 애니메이션 - 큰 물방울
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/54/54886/2/parts.js"></script>
비누방울 터니는 애니메이션
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/51/51873/808/parts.js?tm=20150802040318"></script>
휴~ 사실 애니메이션이 너무 많은데 하나하나 확인하면서 쓰려니 힘드네요 ㅎㅎㅎ
http://htmlhomies.tumblr.com/fall31
위 주소가 샘플 주소잖아요?? fall1 ~ fall41 번까지 있어요
숫자 하나씩 바꿔가면서 보시면 마음에 드시는 애니메이션을 고르실수 있을꺼예요.
고르셨다면 복사한 스크립트롤 블로그에 넣아야겠죠??
블로그 관리 페이지로 오셔서 꾸미기 > HTML / CSS편집 이동
CTRL + F 눌러서 <body> 검색하셔서 <body></body> 사이에
복사하신 스크립트를 넣어주세요
저는 스크립트가 모여있는 <body> 안에 같이 모아 두었어요.
그리고 저장하시고 새로고침하면 짜잔!!
예쁘게 이용하세요.
'알아두면 좋은 거겠지? > 티스토리' 카테고리의 다른 글
| [티스토리] 티스토리 작성시 표 가운데 정렬하기 (0) | 2018.01.10 |
|---|---|
| [티스토리] 티스토리에 네이버 애널리틱스 적용 (0) | 2017.12.11 |
| [티스토리] 블로그 메인페이지 설정방법 (1) | 2017.12.01 |
