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>

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

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>

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

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

.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 제거, 빨간 테두리 제거
		});
	});
}

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

실행 가능한 소스

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에 대한 응용과 이해도 중요합니다.

실행 가능한 소스

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 제거, 빨간 테두리 제거
		});
	});
}

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

실행 가능한 소스