크리스마스 시즌이 다가왔습니다.
제 블로그에도 눈이 내리고 있죠? >_<
티스토리 블로그 배경에 눈이 내리도록 하는 자바스크립트 효과에 대해 알려드리고자 합니다.
일단 눈이 내리도록 하는 자바스크립트 파일을 다운받으셔야 합니다.
<다운받기>
jquery-1.8.3.min.js티스토리 링크는 트래픽이 많아질 경우, 주소가 바뀌는 경향이 있습니다.
제가 올린 링크의 url을 이용하시면, 나중에 url이 바뀌었을때 적용이 안되니
꼭 따로 다운받아주세요~!
<업로드하기>
다운을 받으셨으면, 이제 위 자바스크립트 파일을 업로드하는 곳으로 가보겠습니다.
위 파일 4개를 다운받으셨으면, Tistory 관리자 모드로 들어갑니다.
위 그림 잘 보이시나요?
HTML/CSS 편집에 들어가셔서, 상단의 파일업로드 탭에 들어갑니다.
파일업로드 탭에 들어가시면, 자신 홈페이지 스킨을 구성하는 그림파일들이 존재합니다.
대부분 images/ 풀더에 저장되며, 추가버튼을 눌러서 위에서 다운받은 자바크스립트 4개의 파일을 올려주세요
추가버튼을 누르고
자바스크립트 네 파일을 업로드 하시면 끝~!
그럼 이렇게 자바스크립트 파일이 images/ 안에 올라가게 됩니다.
jqeery-1.8.3.min.js
jquery.snow.js
snowstorm-min.js
snowstorm.js
제 그림에는 파일 하나가 안보이지만 이해해주시길, 다 올라간거에요~! 4개 다요!!
네 파일이 정상적으로 업로드 됐는지 다시한번 확인 해주시고, 이제 실제로 홈페이지에 적용만 하면 됩니다.
여기까지는 눈이 내리도록 하는 자바스크립트 소스가 자신의 블로그에 올라간 것이고,
이제 진짜로 눈이 내리도록 스킨에 적용만 해주시면 됩니다.
<적용하기>
HTML/CSS 탭에 다시 들어가셔서 소스를 작성해 주세요.
HTML/CSS 윗부분에 보시면 <head> ~ </head> 태그가 있습니다.
</head> 바로 윗부분에 다음과 같은 소스를 넣어주시면 됩니다.
아래는 소스입니다.
<!-- Snowstorm start -->
<script src="./images/jquery-1.8.3.min.js"></script>
<script src="./images/snowstorm.js"></script>
<script src="./images/snowstorm-min.js"></script>
<script type="text/javascript" src="./images/jquery.snow.js"></script>
<script>
jQuery(document).ready( function(){
$.fn.snow();
});
jQuery(document).ready( function(){
$.fn.snow({ minSize: 5, maxSize: 40, newOn: 800, flakeColor: '#0099FF' });
});
</script>
<!-- Snowstorm end -->
위 소스에서 <script src="./images/snowstorm-min.js"></script> 이것의 역할은
작은 눈이 천천히 내렸다가, 바람으로 몰아쳤다가, 등의 랜덤한 효과를 발생하는것 같아요.
(귀찮아서 분석은 안했습니다.)
이것을 지우면 눈이 천천히 내리게 됩니다.
저는 그래서 snowstorm-min.js 소스를 지운 상태이구요.
어느정도 자바스크립트 볼줄 아시는 분은 js 소스 들어가서 눈의 속도랑 방향 등을 결정하는 소스를 수정하셔서
자신만의 눈내리는 효과를 만들어 보세요 ^^
- 이 눈오는 소스의 저작권은 다음과 같습니다.
눈내리는 배경에 파란색 눈이 적용되지 않던것, 수정하였습니다.
첨부파일에 jquery-1.8.3.min.js가 없었는데, 이제 소스 추가해주시면 파란눈까지 적용이 됩니다.
제가 글쓰는 도중에 실수했네요, 죄송합니다.
'Web programing > Javascript' 카테고리의 다른 글
| Javascript table filter 라이브러리 (1) | 2015.10.13 |
|---|---|
| 로또번호 자동생성기 (0) | 2014.12.10 |
| Javascript와 HTML Form 객체 (0) | 2014.07.27 |
| Javascript Array 배열, Location 객체 (0) | 2014.07.26 |
| Javascript 내장객체 사용법 (0) | 2014.07.26 |