웹마스터 팁

눈 내리기

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 (이번 겨울간에만 적용 할 예정입니다)


미리 다운받아야 할 것


  1. 다운받은 세개의 눈 이미지를 업로드합니다. (snow.png, snow2.png, snow3.png) 저는 레이아웃 폴더의 img 폴더에 업로드 했습니다.
  2. 레이아웃의 CSS 파일을 엽니다.
  3. 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번은 따로 이미지 파일이 없어도 된다는 점?


제목 글쓴이 날짜
우편번호 자체DB(csv변환)이용하기 [3] file 인터니즈3 2013.12.23
하나의 호스팅 공간에서 여러개의 xe 사용하기 file 고마워XE 2013.12.19
눈 내리기 [2] 강하레 2013.12.22
익명게시판에서 회원 구분 가능하게 + 각 게시물에서 다른 아이디가 나타나게 하는 방법 [3] jn4kim 2013.08.06
nitrous.io 서버 간혈적으로 꺼질때 해결법 [3] 노리넷[썰코] 2013.12.09
트랙백 기능 자체를 사용 안하기 [4] 윈컴이 2013.05.21
XE 1.7 대버전에서 board 게시판생성 하는방법 [4] file 때린데 또때려 2013.12.03
[속도UP팁] 최근게시물 위젯 속도개선 [5] 소렌트. 2013.12.09
구글 검색 상위 노출 팁 중 한가지 [4] 다크진 2013.12.02
구글 네이버 검색 방지 로봇 robots.txt meta 태그 jiom 2013.12.05
검색 로봇 막기 (검색 bot 막기) jiom 2013.12.05
누리CMS 에디터 잡 버그 있으신 분들 보세요. [2] explode 2013.12.03
XE 지식인 모듈에서 일반 게시판처럼 검색하기 [3] explode 2013.12.02
XE 1.7 에서 사이트맵에서 '메뉴 노출 대상' 설정할때 복수 그룹 선택시 에러 수정법 [1] sejin7940 2013.12.01
소셜 XE 페이스북 로그인 에러 해결 방법 file 신평 2013.11.30
라르게덴님의 Xpresseditor + AXISJ AXUpload5(HTML5)와 mex_default 스킨 [5] 투씨 2013.11.29
팝업묘듈/팝업애드온 사용시 창이동 안될때.. [2] 착한악마 2013.11.29
cafeXE 위젯 설정에서 대상모듈 저장이 안 되는 경우 투씨 2013.08.02
레이아웃을 불려오지 않게 하는 코드 [4] 착한악마 2013.11.13
multimedia file 첨부 시 자동으로 jw player 로 설정 더뿌 2013.11.27