블로그에 눈,비,하트 내리는 애니매이션 효과 적용하기

블로그에 눈,비,하트 내리는 애니매이션 효과 적용하기

애니메이션 효과

위의 이미지처럼 블로그에 애니매이션을 추가해 무언가 위에서부터 내리는 효과를 적용해보겠습니다. From Masterpost by dontbrag​

블로그에 여러가지 애니매이션 효과를 넣어서 꾸미는 방법을 알려드릴께요~ 

우선, 첫번째로 아래 리스트에서 사용하고자하는 이미지를 선택해주세요!


하늘에서 내리는 팝콘 이미지!
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/20/20857/79/parts.js"></script>

샘플 보러가기 - 팝콘 내리는 이미지

비 내리는 이미지! 1번 - 일반 빗방울
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/52/52903/7/parts.js"></script>

샘플 보러가기 - 비 내리는 이미지

비 내리는 이미지! 2번 - 가늘고 긴 빗방울
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/48/48251/866/parts.js"></script>

샘플 보러가기 - 비 내리는 이미지 2번

비 내리는 이미지! 3번 - 두껍고 큰 물방울
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/54/54886/2/parts.js"></script>

샘플 보러가기 - 비 내리는 이미지 3번

비 내리는 이미지! 4번 - 믹스 물방울
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/40/40596/106/parts.js"></script>

샘플 보러가기 - 비 내리는 이미지 4번 - 믹스 물방울

하트 내리는 이미지!
<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/40/40596/136/parts.js"></script>

샘플 보러가기 - 수박 떨어지는 이미지

폭죽 터지는 이미지!
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/52/52212/99/parts.js"></script>

샘플 보러가기 - 폭죽 터지는 이미지

꿀벌 날라다니는 이미지!
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/53/53342/119/parts.js"></script>

샘플 보러가기 - 꿀벌 날라다니는 이미지

꿀벌 날라다니는 이미지! 2번째
<script type="text/javascript" language="javascript" charset="euc-jp" src="http://www.hapinemu.net/fobp/bp076/bp076.js"></script>

샘플 보러가기 - 꿀벌 날라다니는 이미지 2번째

눈송이 내리는 이미지!
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/21/21229/19/parts.js"></script>

샘플 보러가기 - 눈송이 내리는 이미지

눈송이 내리는 이미지 2번째
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/52/52903/5/parts.js"></script>

샘플 보러가기 - 눈송이 내리는 이미지 2번째

눈송이 내리는 이미지 3번째 1,2번 혼합
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/52/52903/1/parts.js"></script>

샘플 보러가기 - 눈송이 내리는 이미지 3번째 - 1,2번째 혼합

음악 악보 내려오는 이미지!
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/52/52903/2/parts.js"></script>

샘플 보러가기 - 음악 악보 내려오는 이미지

꽃잎 내려오는 이미지!
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/49/49060/2/parts.js"></script>

샘플 보러가기 - 꽃잎 내려오는 이미지

하늘에서 떨어지는 강아지, 고양이, 양
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/25/25387/772/parts.js"></script>

샘플 보러가기 - 하늘에서 떨어지는 강아지, 고양이, 양


설정할 이미지를 정하였다면 코드를 복사한 후에 블로그로 이동합니다.
티스토리에 애니매이션 효과 적용하기!



티스토리로 이동하여 로그인 후 티스토리 관리로 들어갑니다. 그 다음 꾸미기에 HTML/CSS 편집을 찾아서 클릭해주세요. 새로운 창이 열리고 스킨편집창이 열리면 컨트롤 + F를 이용해 </head>또는 <body> 부분을 찾아주세요. 그다음엔 설정하기로 마음먹었던 미리 복사해둔 코드를 <body> 바로 뒤에 붙여넣기 한 후에 저장하고 새로고침하면 끝입니다.

티스토리 html/css 편집 
블로그에 눈,비,하트 내리는 애니매이션 효과 적용하기 블로그에 눈,비,하트 내리는 애니매이션 효과 적용하기 Reviewed by Viral and Trending Stories on 3월 18, 2017 Rating: 5

댓글 없음: