jQuery(제이쿼리) 강좌와 예제모음

귀신이 나오는 무서운 예제. 주의 요망.

전체 기초강좌 만들어보기 초급예제 중급예제 그렇군 대기중 jQuryUI 예제
등록일 :

어렵지 않은 코드로 멋진 효과내기(?)

이번 예제는 가성비 좋은 코드입니다.
가성비가 좋다고한 이유는 간단한 코드에 비해 멋진(?) 효과를 내기 때문인데요.

아래 검은 상자를 클릭해 보시면 알 수 있습니다.
강력할 수도 있겠네요. ^^;

이걸 만드는 과정을 예제로 해보겠습니다.
준비 되셨으면 눌러주세요 !

※ 약간 무서울 수 있으니 조심해서 눌러주세요.
※ 깜놀 주의 !!!! 깜놀 주의 !!!! 깜놀 주의 !!!!

헉 !? 귀신

귀신

시작 : 귀신이 등장할 검은 상자를 만듭시다

깜짝 놀라셨다면 사과의 말씀 드립니다. ㅠㅠ..
그럼 순서대로 차근차근 만들어 보겠습니다. >_<

검은 상자는 DIV 태그와 CSS를 이용해서 간단히 만들수 있습니다.

CSS

.ghostbox { /* 귀신 상자 */
	background-color : black;
	border-radius : 20px; /* 모서리 둥굴게 */
	box-shadow : 0 0 10px gray; /* 박스 주위로 회색 그림자 */
	height : 550px;
	margin : 0 auto; /* 가운데 정렬 */
	width : 800px;
}

HTML

<div class="ghostbox"></div>


이렇게 하면 검은 상자가 만들어 집니다. 이건 눌러도 아무것도 안나옵니다. ^^;

준비물 : 귀신 이미지

원한을 품은 처녀귀신

검은 배경에 사용할 GIF 이미지 입니다.
수위 조절을 해서 선택한 이미지라 별로 공포스럽지는 않습니다. (?)

이 이미지를 아주 오래전 부터 알고 계시다면 당신은 "아재" 일 가능성이 높습니다.
최소 에 구했던 이미지 이니까요.

이거 원본은 입이 뻐끔뻐끔 거립니다.
예제에 사용하기 위해 그 부분은 없앴습니다.

검은 상자에 귀신 투입 !!


그냥 넣기만 했는데도 그럴듯 하네요.

CSS 를 이용해서 귀신을 검은상자의 배경이미지로 설정하였고
중앙정렬 지정 + 배경 반복 안되게 했습니다.

※ 핵심
- CSS 속성을 사용해서 간단하게 중앙 정렬.
- 이렇게 하면 스크립트로 애니메이션할 때 중앙 정렬을 위한 계산을 안해도 됨.

CSS

.ghostbox {
	background-color:black;
	background-image:url('http://superkts.com/img/css/ghost.gif'); /* 귀신 이미지를 배경으로 설정 */
	background-position:center; /* 이미지 중앙 정렬 */
	background-repeat:no-repeat; /* 이미지 반복 안함 */
	border-radius:20px;
	box-shadow:0 0 10px gray;
	height:550px;
	margin:0 auto;
	width:800px;
}

HTML

<div class="ghostbox"></div>


보고 있는데 갑자기 움직이면 놀라겠죠.

이제 jQuery 로 귀신에 생명(!)을 불어넣어 봅시다

- 귀신 이미지를 작게 만들고 확대 시키는 것을 제이쿼리 애니메이션으로 해볼겁니다.
- 이미지는 CSS 로 중앙정렬 되어있으므로 위치는 따로 컨트롤 할 필요가 없습니다. (편함)
- 그냥 확대만 시키면 되겠습니다.

상자를 클릭해서 귀신을 불러봅시다

간단한 효과만 넣은 예제입니다.

- 여러번 클릭해 보세요 ^^

CSS

.ghostbox {
	background-color:black;
	background-image:url('http://superkts.com/img/css/ghost.gif');
	background-position:center;
	background-repeat:no-repeat;
	background-size:0; /* 이미지 크기를 0 으로 해서 안보이게 합니다 */
	border-radius:20px;
	box-shadow:0 0 10px gray;
	cursor:pointer; /* 검은상자에 마우스 커서 지정 */
	height:550px;
	margin:0 auto;
	width:800px;
}

HTML

<div class="ghostbox" onclick="ghostOn()"></div>

자바스크립트

// 제이쿼리 animate 메소드를 사용해서 귀신이 나오게 합니다
function ghostOn(){
	// 1초 동안 background-size 를 80% 더 크게 만들기
	// 현재 값에 +80% 이므로 실행시 계속 커지게 됨
	$('.ghostbox').animate({'background-size':'+=80%'}, 1000);
}


이제 이 예제를 좀 더 개선해서 더 그럴듯 하게 만들어 봐야겠죠.

좀 더 쓸만하게 만들기

- 귀신이 나왔다가 사라지게 해봅시다. (이미지가 커졌다가 작아지도록)
- 귀신이 움직이는 동안에는 클릭해도 반응하지 않도록 해봅시다.

CSS

.ghostbox {
	background-color:black;
	background-image:url('http://superkts.com/img/css/ghost.gif');
	background-position:center;
	background-repeat:no-repeat;
	background-size:0; /* 이미지 크기를 0 으로 해서 안보이게 합니다 */
	border-radius:20px;
	box-shadow:0 0 10px gray;
	cursor:pointer; /* 검은상자에 마우스 커서 지정 */
	height:550px;
	margin:0 auto;
	width:800px;
}

HTML

<div class="ghostbox" onclick="ghostOn()"></div>

자바스크립트

// 제이쿼리 animate 메소드를 사용해서 귀신이 나오게 합니다
function ghostOn(){
	// 1초 동안 background-size 를 80% 더 크게 만들기
	// :not(:animated) 셀렉터를 사용해서 애니메이션중이 아닐때만 실행하기
	$('.ghostbox:not(:animated)').animate({'background-size':'+=80%'}, 1000, function(){
		// 커지는 효과가 끝나면 작아지도록 함
		$('.ghostbox').animate({'background-size':'-=80%'}, 10000); // 10 초동안 노려보면서 사라짐
	});
}

약간의 효과 더 추가하기

- 귀신이 나왔을때 약간의 효과를 더 추가해 보았습니다.
- CSS 로 간단히 추가했고 jQuery 로 적용, 해제 해 보겠습니다.
- 한번 더 검은 상자를 눌러보세요 ^^

CSS

.ghostbox {
	background-color:black;
	background-image:url('http://superkts.com/img/css/ghost.gif');
	background-position:center;
	background-repeat:no-repeat;
	background-size:0; /* 이미지 크기를 0 으로 해서 안보이게 합니다 */
	border-radius:20px;
	box-shadow:0 0 10px gray;
	cursor:pointer; /* 검은상자에 마우스 커서 지정 */
	height:550px;
	margin:0 auto;
	width:800px;
}
.ghostbox.fear_on { /* 검은 상자에 빨간 안쪽 테두리 추가 */
	box-shadow:0 0 60px red inset, 0 0 30px red inset;
}

HTML

<div class="ghostbox" onclick="ghostOn()"></div>

자바스크립트

// 제이쿼리 animate 메소드를 사용해서 귀신이 나오게 합니다
function ghostOn(){
	// 1초 동안 background-size 를 80% 더 크게 만들기
	// :not(:animated) 셀렉터를 사용해서 애니메이션중이 아닐때만 실행하기
	// fear_on 클래스 적용하기
	$('.ghostbox:not(:animated)').addClass('fear_on').animate({'background-size':'+=80%'}, 1000, function(){
		// 커지는 효과가 끝나면 작아지도록 함
		// 10 초동안 노려보면서 사라짐
		$('.ghostbox').animate({'background-size':'-=80%'}, 10000, function(){
			$(this).removeClass('fear_on'); // fear_on 제거, 빨간 테두리 제거
		});
	});
}


처음 보았던 예제에 거의 근접해졌습니다. 좀 더 가볼까요? ㅎㅎ

실행 가능한 소스

페이지 처음에서 보았던 예제

jQueryUI 이징(easing) 효과를 사용했습니다.

CSS

.ghostbox {
	background-color:black;
	background-image:url('http://superkts.com/img/css/ghost.gif');
	background-position:center;
	background-repeat:no-repeat;
	background-size:0;
	border-radius:20px;
	box-shadow:0 0 10px gray;
	cursor:pointer;
	height:550px;
	margin:0 auto;
	width:800px;
}
.ghostbox.fear_on {
	box-shadow:0 0 60px red inset, 0 0 30px red inset;
}

HTML

<div class="ghostbox" onclick="ghostOn()"></div>

자바스크립트

function ghostOn(){
	$('.ghostbox:not(:animated)') // 클래스명이 ghostbox 이면서 애니메이션중이 아닌것 찾기
	.addClass('fear_on') // 빨간 테두리 클래스 추가
	.animate({'background-size':'+=80%'}, 1500, 'easeOutElastic', function(){ // easeOutElastic 효과 적용하여 1.5초 동안 배경 80% 확대
		// 확대가 끝나면 아래 실행
		$('.ghostbox').animate({'background-size':'-=80%'}, 5000, function(){ // 5초 동안 배경 80% 축소
			$(this).removeClass('fear_on'); // 배경 축소가 끝나면 빨간 테두리 제거
		});
	});
}

제이쿼리도 중요하지만 CSS에 대한 응용과 이해도 중요합니다.

실행 가능한 소스

정말 마지막 예제

- 검은 상자 대신 사진을 사용해 보았습니다.
- 제이쿼리UI 의 이징(easing)효과도 적용했습니다.
- 문경에 있는 석현 터널이라는 곳인데 직접 찍은 사진입니다.
- 터널안은 실제로 공포입니다. ㄷㄷ

CSS

.bg {
	background-image:url('http://ktsmemo.cafe24.com/api/random_background.php?n=24'); /* 터널 사진 */
	background-position:50% 50%; /* 사진 중앙 정렬 */
	background-repeat:no-repeat;
	background-size:cover; /* 이미지를 영역에 가득 채운다 */
	height:800px;
	margin:0 auto;
	width:1200px;
}
.ghostbox {
	background-image:url('http://superkts.com/img/css/ghost.gif'); /* 귀신 이미지 */
	background-position:50% 50%; /* 이미지 중앙 정렬 */
	background-repeat:no-repeat;
	background-size:0; /* 이미지 크기를 0 으로 해서 안보이게 합니다 */
	cursor:pointer; /* 검은상자에 마우스 커서 지정 */
	height:100%; /* 높이 100% */
}
.ghostbox.fear_on { /* 검은 상자에 빨간 안쪽 테두리 추가 */
	box-shadow:0 0 60px red inset, 0 0 30px red inset;
}

HTML

<div class="bg">
	<div class="ghostbox" onclick="ghostOn()"></div>
</div>

자바스크립트

// 제이쿼리 animate 메소드를 사용해서 귀신이 나오게 합니다
function ghostOn(){
	// 1초 동안 background-size 를 80% 더 크게 만들기
	// :not(:animated) 셀렉터를 사용해서 애니메이션중이 아닐때만 실행하기
	// fear_on 클래스 적용하기
	// 이징효과 easeOutElastic 적용 (귀신이 나올 때 효과)
	$('.ghostbox:not(:animated)').addClass('fear_on').animate({'background-size':'400px'}, 1000, 'easeOutElastic', function(){
		// 커지는 효과가 끝나면 작아지도록 함
		// 10 초동안 노려보면서 사라짐
		$('.ghostbox').animate({'background-size':'0'}, 5000, function(){
			$(this).removeClass('fear_on'); // fear_on 제거, 빨간 테두리 제거
		});
	});
}

귀신 자주 보니까 안무섭네요.. ^^;

실행 가능한 소스

귀신은 이제 그만~!

제이쿼리 공작소와 CSS 공작소는 직접 제작 운영중인 사이트 입니다.
시간 되시면 한번 방문해 보세요 ^^;