웹마스터 팁
눈 내리기
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 파일을 다음과 같이 수정합니다.12345678910111213141516171819202122232425262728293031323334
/* (선택)배경 이미지가 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: snow10s linear infinite;-moz-animation: snow10s linear infinite;-ms-animation: snow10s linear infinite;animation: snow10s linear infinite;}}/* 눈 내리는 효과 설정 CSS 파일 맨 아래에 추가*/@keyframes snow {0%{background-position:0px0px,0px0px,0px0px;}100%{background-position:500px1000px,400px400px,300px300px;}}@-moz-keyframes snow {0%{background-position:0px0px,0px0px,0px0px;}100%{background-position:500px1000px,400px400px,300px300px;}}@-webkit-keyframes snow {0%{background-position:0px0px,0px0px,0px0px;}50%{}100%{background-position:500px1000px,400px400px,300px300px;}}@-ms-keyframes snow {0%{background-position:0px0px,0px0px,0px0px;}100%{background-position:500px1000px,400px400px,300px300px;}}
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 로 저장합니다
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | /** * 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 파일을 로드 합니다.
1 |
3. 레이아웃이 로드하는 적당한 js 파일에 다음 코드를 넣습니다. 방금 만든 파일의 맨 아래에 넣어도 큰 상관은 없습니다.
1 2 3 4 5 6 7 8 9 | /* 기본 */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번은 따로 이미지 파일이 없어도 된다는 점?
진격의 css3 .......