웹마스터 팁
눈 내리기
2013.12.22 10:26
1. CSS, jQuery 이런거 잘 모른다.
http://www.xpressengine.com/index.php?mid=download&search_keyword=%EB%88%88&package_srl=20673640
이 애드온을 다운받아 설치 한 뒤 적용하세요.
다만 일부 사용자가 불편을 호소 할 수 있습니다.
2. CSS를 이용해 눈 내리기 (추천)
CSS3을 이용해 눈을 내립니다. 쉽기도 하지만 일단 꽤 빠릅니다.
원문 : http://designshack.net/?p=27674
데모 (원작자 제공) : http://designshack.net/tutorialexamples/letitsnow/index.html
데모 (XE 적용 모습) : http://www.haganai.me (이번 겨울간에만 적용 할 예정입니다)
미리 다운받아야 할 것
- http://imm.io/1mQzs snow.png
- http://imm.io/1mQzK snow2.png (snow22.png로 잘못 올렸는데 snow2.png 로 저장 해 주세요)
- http://imm.io/1mQzZ snow3.png
- 다운받은 세개의 눈 이미지를 업로드합니다. (snow.png, snow2.png, snow3.png) 저는 레이아웃 폴더의 img 폴더에 업로드 했습니다.
- 레이아웃의 CSS 파일을 엽니다.
- CSS 파일을 다음과 같이 수정합니다.
/* (선택)배경 이미지가 body에 적용 되어있을 경우 html 요소로 이동 */ html{overflow-y:scroll;overflow-x:hidden;background-image:background.png);background-repeat:repeat; background-attachment:fixed;} /* body 요소에 아래 내용 삽입 */ body { background-color: #6b92b9; /*(선택) 배경색이 필요 할 경우, 배경 이미지가 있으면 이 코드 제거 */ background-image: url('img/snow1.png'), url('img/snow2.png'), url('img/snow3.png'); -webkit-animation: snow 10s linear infinite; -moz-animation: snow 10s linear infinite; -ms-animation: snow 10s linear infinite; animation: snow 10s linear infinite;} } /* 눈 내리는 효과 설정 CSS 파일 맨 아래에 추가*/ @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-webkit-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-ms-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} }
html과 body 요소에 이미 다른 내용이 있을 경우 기존에 있던 내용을 지우지 마시고, 위 내용을 추가만 해 주시면 됩니다.
이미지만 바꿔 준다면 봄에 벚꽃이 내린다던가, 가을에 낙엽이 내린다던가, 여름에 돌고래가 내린다던가 하는 것도 가능합니다.
3. jquery.snow plugin 이용하기
예쁘기도 더 예쁘고 그렇게 무거운 편도 아니긴 한데, 개인적으로 테스트 했을 땐 어떤 서버 환경에서는 동작을 안 하고 어떤 환경에서는 동작 하는 문제가 있었습니다. -_-;
원문 : http://workshop.rs/2012/01/jquery-snow-falling-plugin/
데모 : http://workshop.rs/projects/jqsnow/
1. https://github.com/kopipejst/jqSnow/downloads 에서 코드를 다운로드 받거나 다음 코드를 복사, jquery.snow.js 로 저장합니다
/** * jquery.snow - jQuery Snow Effect Plugin * * Available under MIT licence * * @version 1 (21. Jan 2012) * @author Ivan Lazarevic * @requires jQuery * @see http://workshop.rs * * @params minSize - min size of snowflake, 10 by default * @params maxSize - max size of snowflake, 20 by default * @params newOn - frequency in ms of appearing of new snowflake, 500 by default * @example $.fn.snow({ maxSize: 200, newOn: 1000 }); */ (function($){ $.fn.snow = function(options){ var $flake = $('').css({'position': 'absolute', 'top': '-50px'}).html('❄'), documentHeight = $(document).height(), documentWidth = $(document).width(), defaults = { minSize : 10, maxSize : 20, newOn : 500, flakeColor : "#FFFFFF" }, options = $.extend({}, defaults, options); var interval = setInterval( function(){ var startPositionLeft = Math.random() * documentWidth - 100, startOpacity = 0.5 + Math.random(), sizeFlake = options.minSize + Math.random() * options.maxSize, endPositionTop = documentHeight - 40, endPositionLeft = startPositionLeft - 100 + Math.random() * 200, durationFall = documentHeight * 10 + Math.random() * 5000; $flake .clone() .appendTo('body') .css( { left: startPositionLeft, opacity: startOpacity, 'font-size': sizeFlake, color: options.flakeColor } ) .animate( { top: endPositionTop, left: endPositionLeft, opacity: 0.2 }, durationFall, 'linear', function() { $(this).remove() } ); }, options.newOn); }; })(jQuery);
2. 레이아웃에서 방금 저장한 js 파일을 로드 합니다.
3. 레이아웃이 로드하는 적당한 js 파일에 다음 코드를 넣습니다. 방금 만든 파일의 맨 아래에 넣어도 큰 상관은 없습니다.
/* 기본 */ jQuery(document).ready( function(){ $.fn.snow(); }); /* 옵션 지정이 필요하다면 위의 코드 말고 이 코드를 쓰세요 */ jQuery(document).ready( function(){ $.fn.snow({ minSize: 5, maxSize: 50, newOn: 1000, flakeColor: '#0099FF' }); });
옵션을 설명하자면
- minsize : 가장 작은 눈의 크키. 기본 10
- maxSize : 가장 큰 눈의 크기. 기본 20.
- newOn : 몇 ms마다 눈이 떨어질지. 기본 500
- flakeColor : 눈의 색. 기본 #FFFFFF
개인적으로는 2번이 적용하기도 쉽고 괜찮네요.
3번은 따로 이미지 파일이 없어도 된다는 점?
제목 | 글쓴이 | 날짜 |
---|---|---|
사이트 이전팁( files 폴더) [6] | 샤이니라 | 2009.01.28 |
XE1.1.5로 업후 기존변형위젯들이 문제를 일으킬때 수정방법 [1] | 팔공산 | 2009.01.28 |
[강추]!! 긁어와서 [자동]으로 게시글로!! [메타 블로그] php 로 넣기!!! xe블로그api를 이용한.. [51] | 김기철980 | 2009.01.29 |
menu 무제한으로 단계(depth) 표시하기. [5] | 라르게덴 | 2009.01.29 |
최근 게시물 출력시 카테고리(분류) 표시하기.. [5] | 엘카인 | 2009.01.30 |
외부페이지 또는 파일링크시 글자깨짐 현상 [1] | 소백산 | 2009.01.31 |
신고 수가 일정 수 이상 되면 특정 게시판으로 이동시키기 [6] | SMaker | 2009.02.01 |
관리자 여러명 만들기 팁 [1] | 만쓰별(정만) | 2009.02.03 |
한글도메인(.kr) 사용시 링크걸기 [3] | serendip | 2009.02.04 |
상담게시판 바로 글쓰기 이동하기 팁.. [3] | 만쓰별(정만) | 2009.02.05 |
png파일 제어 ie6투명버그 해결책이 될듯도 한데염 [7] | 만쓰별(정만) | 2009.02.05 |
날짜 부분에 시간도 같이 표시하기 [1] | 소백산 | 2009.02.05 |
1.1.5 버전에서 로고가 나타나지 않는 문제 | gotomoon | 2009.02.06 |
윈도우 서버에서 XE 업데이트 어려움... [2] | 윤임수 | 2009.02.06 |
나만의 카운터를 만들어보자! [3] | 데미안k | 2009.02.08 |
D-DAY 플래시 | 세츠카 | 2009.02.09 |
드림위버에서 제로보드 XE 레이아웃 편집하기 [4] | 샤릉해 | 2009.02.10 |
첨부파일 보이기 숨기기 옵션추가 [18] | ☜ TeRy ☞ | 2009.02.10 |
완벽하게 XE폴더를 url에서 접속하기 [2] | 팬텀MW | 2009.02.10 |
게시판에서 사이트 관리자만 볼수있는 항목 만들기 [1] | ☜ TeRy ☞ | 2009.02.13 |
진격의 css3 .......