Web programing/Javascript
티스토리 블로그 배경에 눈내리는 효과 주기
크리스마스 시즌이 다가왔습니다.
제 블로그에도 눈이 내리고 있죠? >_<
티스토리 블로그 배경에 눈이 내리도록 하는 자바스크립트 효과에 대해 알려드리고자 합니다.
일단 눈이 내리도록 하는 자바스크립트 파일을 다운받으셔야 합니다.
<다운받기>
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 소스 들어가서 눈의 속도랑 방향 등을 결정하는 소스를 수정하셔서
자신만의 눈내리는 효과를 만들어 보세요 ^^
- 이 눈오는 소스의 저작권은 다음과 같습니다.
/* @license
* DHTML Snowstorm! JavaScript-based snow for web pages
* Making it snow on the internets since 2003. You're welcome.
* -----------------------------------------------------------
* Version 1.44.20131208 (Previous rev: 1.44.20131125)
* Copyright (c) 2007, Scott Schiller. All rights reserved.
* Code provided under the BSD License
* http://schillmania.com/projects/snowstorm/license.txt
*/
/** @license
DHTML Snowstorm! JavaScript-based snow for web pages
Making it snow on the internets since 2003. You're welcome.
-----------------------------------------------------------
Version 1.44.20131208 (Previous rev: 1.44.20131125)
Copyright (c) 2007, Scott Schiller. All rights reserved.
Code provided under the BSD License
http://schillmania.com/projects/snowstorm/license.txt
*/
눈내리는 배경에 파란색 눈이 적용되지 않던것, 수정하였습니다.
첨부파일에 jquery-1.8.3.min.js가 없었는데, 이제 소스 추가해주시면 파란눈까지 적용이 됩니다.
제가 글쓰는 도중에 실수했네요, 죄송합니다.
'Web programing > Javascript' 카테고리의 다른 글
| Javascript table filter 라이브러리 (1) | 2015.10.13 |
|---|---|
| 로또번호 자동생성기 (0) | 2014.12.10 |
| 티스토리 블로그 배경에 눈내리는 효과 주기 (39) | 2014.12.05 |
| Javascript와 HTML Form 객체 (0) | 2014.07.27 |
| Javascript Array 배열, Location 객체 (0) | 2014.07.26 |
| Javascript 내장객체 사용법 (0) | 2014.07.26 |
'Web programing/Javascript'의 다른글
- 이전글Javascript와 HTML Form 객체
- 현재글티스토리 블로그 배경에 눈내리는 효과 주기
- 다음글로또번호 자동생성기
관련글
-
-
-
-
-
-
PINK LUV 2014.12.06 20:43
방금 적용하고 왔는데 예쁘게 잘 적용되네요 :D
답글
다만 본문 중 다운 파일 4개 중에 jqeery-1.8.3.min.js 파일은 없고
jquery.snow.js파일이 중복으로 2개가 올려져 있으며
스크립트 붙여넣을 때도
<script src="./images/jquery-1.8.3.min.js"></script>
이 부분은 빼고 넣었습니다(물론 넣는다고 해서 오류나는건 아니지만).
파란색 눈결정이 제 블로그에서는 안내리는걸로 보아서는
jqeery-1.8.3.min.js가 파란색 눈결정소스였나봐요 :D
소중한 자료 잘 쓰겠습니다!
-
-
베베숲님 홈페이지의 script 소스를 그대로 test 해봤는데,
파란눈이 잘 나오는걸로 봐선 소스와 파일의 문제인것같진 않습니다.
<!-- Snowstorm start -->
<script src="https://ts.daumcdn.net/custom/blog/44/440052/skin/images/jquery-1.8.3.min.js"></script>
<script src="https://ts.daumcdn.net/custom/blog/44/440052/skin/images/snowstorm.js"></script>
<!--<script src="https://ts.daumcdn.net/custom/blog/44/440052/skin/images/snowstorm-min.js"></script>-->
<script type="text/javascript" src="https://ts.daumcdn.net/custom/blog/44/440052/skin/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 -->
이렇게 한번 소스에 넣어보시겠어요?
홈페이지 스킨에서 같은 함수를 사용한다던가..
같은 변수를 사용한다던가... 때문일수 있을것 같은데 잘 모르겠네요.
스킨을 다른것으로 테스트 해보시는건 어떠신지.
큰 도움을 못드려서 죄송하네요.
-
-
ㅠㅠ헝헝..감사합니다 ㅠㅠㅠㅠㅠㅠㅠㅠㅠ
답글
흠..... 이렇게해도.. 저렇게해도.. 파란눈은 안내리네요 ....
평범한 스킨에 붙여도 똑같네요.... 어떤게문제일까요?? -
흠..... 답글보고 바로 실행에 옮겨봤습니다....
답글
( 오른쪽해제를 풀어놨습니다. )
주인장님의 소스를 따왔는데도 그대로네요..... 하.. 뭐가문제일지..
스킨이문제일까요??
------ 수정 ------
아... 스킨을 전에쓰던 스킨으로 바꿔보았더니
파란눈까지 내리네요....
이런 문제는 html 이 겹쳐서 오류난건가요?? -
-
-
지나가던이방인 2015.08.01 19:00
안녕하세요~! 올려주신 소스 덕분에 잘 적용했습니다!
답글
+ jqeery-1.8.3.min.js 파일은 파란 눈 결정 소스가 아니라, jQuery 플러그인을 사용해 주기 위한 소스인데요~
위에 분들 중에 몇몇 분들이 이전 스킨으로 하니까 잘 나온다는 말 보니, 스킨 자체에 이미 해당 플러그인을 사용하고 있는데 중복 추가 하여 안나오거나 아에 해당 소스가 안들어 있어서 안나오는 경우가 있을 것 같아요!
JQuery 의 경우, 현재 2.xxx.xx 버전 인데 소스 별로 버전 호환이 안되는 부분이 있으니까 혹 사용하고 있는 스킨에 jQuery 파일 추가되어있는지 확인해 보고 jqeery-1.8.3.min.js 파일로 변경해 주시면 될거 같네요!
지나가던 이방인이였습니다 ^^)7 -