크리스마스 시즌이 다가왔습니다.
제 블로그에도 눈이 내리고 있죠? >_<
티스토리 블로그 배경에 눈이 내리도록 하는 자바스크립트 효과에 대해 알려드리고자 합니다.
일단 눈이 내리도록 하는 자바스크립트 파일을 다운받으셔야 합니다.
<다운받기>
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 라이브러리 (0) | 2015.10.13 |
|---|---|
| 로또번호 자동생성기 (0) | 2014.12.10 |
| 티스토리 블로그 배경에 눈내리는 효과 주기 (38) | 2014.12.05 |
| Javascript와 HTML Form 객체 (0) | 2014.07.27 |
| Javascript Array 배열, Location 객체 (0) | 2014.07.26 |
| Javascript 내장객체 사용법 (0) | 2014.07.26 |
댓글을 달아 주세요
우왕 이쁘네요ㅋ 한번 해봐야지ㅎ 감사합니다 꾸벅ㅋ
이쁘지 않아요? ^^
이야.. 멋지네요~^^
한번 적용해보세요~! ㅋㅋ
ㅋㅋㅋㅋㅋㅋ저도 해봐야겠어요
강추합니다 ㅋㅋ
이번겨울에 계속 효과 유지하려구요~!
저도 제 블로그에 해봤어요 넘 이뻐요. 감사합니다`!!
예쁘게 잘 적용됐네요 ^^
제 블로그에도 적용해서 겨울 분위기를 내봐야겠네요.
감사합니다.
비밀댓글입니다
업로드파일에 손상이 갔나요?
집에 가면 다시 살펴보겠습니다ㅜ
비밀댓글입니다
방금 적용하고 왔는데 예쁘게 잘 적용되네요 :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
소중한 자료 잘 쓰겠습니다!
jqeery-1.8.3.min.js 파일 업로드 완료되었습니다!
오 내일 적용해봐야 겠네요 ㅎ
까먹지안게 리플하나 달아주세요!
적용해보시고, 이쁘면 겨울에 계속 써보세요!! ^^
음 파란눈이 왜 안나올까요?
베베숲님 홈페이지의 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 -->
이렇게 한번 소스에 넣어보시겠어요?
홈페이지 스킨에서 같은 함수를 사용한다던가..
같은 변수를 사용한다던가... 때문일수 있을것 같은데 잘 모르겠네요.
스킨을 다른것으로 테스트 해보시는건 어떠신지.
큰 도움을 못드려서 죄송하네요.
위배되서 삭제됬네요?
베베숲님 소스를 그대로 댓글 달았는데, 그게 링크때문에 댓글이 삭제됐나보네요..
베베숲님 소스를 그대로 다른사이트에 적용시키면 (베베숲님의 업로드 파일 링크주소 그대로) 파란 눈꽃송이가 나오는데,
이상하게 베베숲님 블로그에 적용이 안되네요.
원인을 생각해보니 아마 스킨문제인것 같습니다.
변수나 함수이름이 같은게 있어서 그럴것같은데,
테스트 삼아 다른스킨을 적용시킨 후에 소스를 추가해보시겠어요?
네 한번 바꿔서 해볼께요
소중한 자료 유용하게 사용해 블로그에 적용해봤습니다. 감사합니다.
블로그가 예뻐서 정말 잘어울리네요 ^^
정말 감사합니다. 잘쓰겠습니다~!!!
ㅠㅠ헝헝..감사합니다 ㅠㅠㅠㅠㅠㅠㅠㅠㅠ
흠..... 이렇게해도.. 저렇게해도.. 파란눈은 안내리네요 ....
평범한 스킨에 붙여도 똑같네요.... 어떤게문제일까요??
제 블로그에서 우클릭 -> 소스보기를 하신 후에
Snowstorm start ~ stop 소스 사이를 복사해서 붙여넣어보세요.
제대로 동작한다면 아파 업로드하신 파일의 문제가 아닐까 합니다.
제 소스를 그대로 붙여넣으면 나중에 URL이 바뀔때, 다시 동작을 안하게 되니 가능하다면 업로드하셔서 사용하는게 좋습니다.
글쓴이분 블로그의 우클릭이 동작이 안되서 확인을 못해봤네요~
흠..... 답글보고 바로 실행에 옮겨봤습니다....
( 오른쪽해제를 풀어놨습니다. )
주인장님의 소스를 따왔는데도 그대로네요..... 하.. 뭐가문제일지..
스킨이문제일까요??
------ 수정 ------
아... 스킨을 전에쓰던 스킨으로 바꿔보았더니
파란눈까지 내리네요....
이런 문제는 html 이 겹쳐서 오류난건가요??
축하드려요~!!
원인은 글쎄요^^;; html 태그 여닫는데서 실수하셨지 않았을까요...
잘되네요. 좋은 정보 감사합니다.
감사합니다 ^^
와 너무 예뻐요! 감사합니다 ㅎㅎ
감사합니다 ^^ 잘쓰세용
저기 죄송한데 제 블로그 스킨이 파스텔 핑크 톤이여서요 파란 눈 결정은 본의아니게 안어울리네요ㅠㅠㅠ 컴맹이라서 적혀있는대로만 했는데 그것만 빼고 적용시킬수 있는 법 없나요ㅠㅠㅠㅠ?
안녕하세요~! 올려주신 소스 덕분에 잘 적용했습니다!
+ jqeery-1.8.3.min.js 파일은 파란 눈 결정 소스가 아니라, jQuery 플러그인을 사용해 주기 위한 소스인데요~
위에 분들 중에 몇몇 분들이 이전 스킨으로 하니까 잘 나온다는 말 보니, 스킨 자체에 이미 해당 플러그인을 사용하고 있는데 중복 추가 하여 안나오거나 아에 해당 소스가 안들어 있어서 안나오는 경우가 있을 것 같아요!
JQuery 의 경우, 현재 2.xxx.xx 버전 인데 소스 별로 버전 호환이 안되는 부분이 있으니까 혹 사용하고 있는 스킨에 jQuery 파일 추가되어있는지 확인해 보고 jqeery-1.8.3.min.js 파일로 변경해 주시면 될거 같네요!
지나가던 이방인이였습니다 ^^)7
감사합니다!!! 덕분에 블로그 이뻐졌어요
감사합니다 ^^ 잘 쓰세요
한번 올려보아요
안녕하세요
반갑습니다
파란눈이 안나오네요 ㅠ.ㅠ