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

박스를 클릭하면 튀어나오는 의문의(!) 얼굴들

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

친숙한 박스에서 이상한 녀석이 !?

아래 박스는 굳이 설명하지 않아도 눌러봐야 할것 같지 않나요?

자 그럼 눌러봅시다. ㅎㅎ
과연 뭐가 나올까요?

?
?
?
생각했던게 나오지 않았어도 너그러운 양해 부탁드립니다. ㅎㅎ
이 예제가 간단해 보여도 생각처럼 쉽지는 않았습니다.
딱히 써먹을 데는 없지만, 뭔가 배울때 가끔 그런 생각이 들곤하죠. 혹시 저만 그런가요? ^^;

하지만 아는것과 모르는것은 큰 차이가 있으므로 이걸 한번 만들어 보도록 하겠습니다.
"왜?" 인지는 중요치 않습니다. 그럼 시작 !!

기본틀 만들기

"?박스" 를 가로로 배열하기 위해 기초 준비를 한 모습입니다.
아래에 "?" 두개만 보이는 모습이 그것입니다.

* 하려고 하는것
- CSS를 최대한 활용한다.
- 자바스크립트로 뭔가 계산하는것은 최소화 한다.
- 그 계산도 jQuery 로 한다. (jQuery UI 이징효과 사용)


?
?

CSS

.helloworld {
	text-align:center;
}
.helloworld .box {
	display:inline-block; /* div 를 수평배열 하기위해 */
	height:200px;
	margin:0 10px;
	width:200px;
}

HTML

<div class="helloworld">
	<div class="box">?</div>
	<div class="box">?</div>
</div>
등록된 댓글이 없습니다.

댓글 쓰기

이름 : 패스워드 :

얼굴을 넣기 위한 기본 박스 만들기

"? 박스" 를 만들었습니다.
그리고 "?" 안에 얼굴을 숨겨야 합니다. 그런후 "?" 를 눌렀을때 얼굴이 올라 오게 하면 됩니다.

* 요약
- "? 박스" 를 만든다.
- 그 박스 뒤에 "얼굴"을 배치하여 안보이게 합니다. (박스와 얼굴을 겹치게 배치)
- 제이쿼리로 "얼굴"을 움직이게 만들면 끝!

?
?

CSS

.helloworld {
	text-align:center;
}
.helloworld .box {
	display:inline-block; /* div 를 수평배열 하기위해 */
	height:200px;
	margin:0 10px;
	position:relative; /* 아래 .label 에서 width, height 100%를 영역안에서 동작시키기 위해 필요 */
	width:200px;
}
.helloworld .box .label {
	background:#E6B467;
	border-radius:5px;
	border:10px outset #A37225;
	color:#9E6D20;
	cursor:pointer;
	font-size:60pt !important;
	height:100%; /* 부모 요소에 position:relative 있어야 함, 없으면 의도하지 않게 됨 */
	line-height:200px !important;
	text-shadow:0 0 5px white, 0 0 10px white;
	width:100%; /* 부모 요소에 position:relative 있어야 함, 없으면 의도하지 않게 됨 */
	z-index:10;
}

HTML

<div class="helloworld">
	<div class="box">
		<div class="label">?</div>
	</div>
	<div class="box">
		<div class="label">?</div>
	</div>
</div>
등록된 댓글이 없습니다.

댓글 쓰기

이름 : 패스워드 :

박스와 얼굴 배치

박스 뒤에 얼굴을 숨기기 전에 배치해 본 모습입니다.
이 상태에서 CSS 속성을 하나 추가하면 원하는 상태가 됩니다.

* 3줄 요약
- 박스 아래에 얼굴을 위치시킨다.
- 박스와 얼굴은 겹쳐 있어서 얼굴이 보이지 않는다. (박스가 얼굴위에 있음)
- 얼굴은 img 태그로 하지 않고 div 에 배경으로 넣는다.

?
?



CSS

.helloworld {
	text-align:center;
}
.helloworld .box {
	display:inline-block; /* div 를 수평배열 하기위해 */
	height:200px;
	margin:0 10px;
	position:relative; /* 아래 .label 에서 width, height 100%를 영역안에서 동작시키기 위해 필요 */
	width:200px;
}
.helloworld .box .label {
	background:#E6B467;
	border-radius:5px;
	border:10px outset #A37225;
	color:#9E6D20;
	cursor:pointer;
	font-size:60pt !important;
	height:100%; /* 부모 요소에 position:relative 있어야 함, 없으면 오작동 */
	line-height:200px !important;
	text-shadow:0 0 5px white, 0 0 10px white;
	width:100%; /* 부모 요소에 position:relative 있어야 함, 없으면 오작동 */
	z-index:10;
}
.helloworld .box .face {
	background-image:url('http://biketago.com/img/etc/huk3.gif');
	background-repeat:no-repeat;
	background-size:100%;
	height:100%;
	width:100%;
}

HTML

<div class="helloworld">
	<div class="box">
		<div class="face"></div><!-- 얼굴을 배경으로 지정한 div -->
		<div class="label">?</div><!-- ? 박스 -->
	</div>
	<div class="box">
		<div class="face"></div>
		<div class="label">?</div>
	</div>
</div>
<br><br><br>
등록된 댓글이 없습니다.

댓글 쓰기

이름 : 패스워드 :

기본 배치 완료 !!

드디어 얼굴을 박스 뒤로 숨겼습니다.
코드상으로는 그렇지만 이제 부터 박스안에 얼굴이 들어있는걸로 생각합시다.

* 해야 할것
- 박스를 클릭하면 얼굴이 올라오게 한다.
- 얼굴이 다 올라오면 다시 내려가게 한다. (다 올라온 상태에서 아주 잠깐 멈추게도 한다)
- 클릭시 박스가 들석 거리는 효과도 주면 보기 좋다.

?
?

CSS

.helloworld {
	text-align:center;
}
.helloworld .box {
	display:inline-block; /* div 를 수평배열 하기위해 */
	height:200px;
	margin:0 10px;
	position:relative; /* 아래 .label 에서 width, height 100%를 영역안에서 동작시키기 위해 필요 */
	width:200px;
}
.helloworld .box .label {
	background:#E6B467;
	border-radius:5px;
	border:10px outset #A37225;
	color:#9E6D20;
	cursor:pointer;
	font-size:60pt !important;
	height:100%;
	line-height:200px !important;
	position:absolute; /* 추가된 CSS */
	text-shadow:0 0 5px white, 0 0 10px white;
	width:100%;
	z-index:10;
}
.helloworld .box .face {
	background-image:url('http://biketago.com/img/etc/huk3.gif');
	background-repeat:no-repeat;
	background-size:100%;
	height:100%;
	position:absolute; /* 추가된 CSS */
	width:100%;
}

HTML

<div class="helloworld">
	<div class="box">
		<div class="face"></div><!-- 얼굴을 배경으로 지정한 div -->
		<div class="label">?</div><!-- ? 박스 -->
	</div>
	<div class="box">
		<div class="face"></div>
		<div class="label">?</div>
	</div>
</div>
등록된 댓글이 없습니다.

댓글 쓰기

이름 : 패스워드 :

두가지 얼굴 준비 하기

평온한 얼굴

놀란 얼굴

얼굴에 대해서 잠시 설명을 해야겠습니다. 위는 사용한 이미지 입니다.
CSS 만 사용해서 두가지 얼굴이 나오도록 만들었습니다.
어려운건 아니니 아래 예제를 보시면 이해되시리라 믿습니다.

- CSS를 최대한 활용하는게 좋습니다.
- 아래와 같은걸 하기위해 필요할때 자바스크립트로 img 태그에 src 를 바꾸는 방법도 있습니다.

CSS

.helloworld {
	text-align:center;
}
.helloworld .box {
	display:inline-block;
	height:200px;
	margin:0 10px;
	position:relative;
	width:200px;
}
.helloworld .box .face {
	background-image:url('http://biketago.com/img/etc/huk3.gif');
	background-repeat:no-repeat;
	background-size:100%;
	height:100%;
	position:absolute;
	width:100%;
}
.helloworld .box .face.peace { /* 평온한 얼굴, .face.peace 처럼 띄어쓰기 하지 않음에 주의 */
	background-image:url('http://biketago.com/img/etc/huk1.gif');
}

HTML

<div class="helloworld">
	<div class="box">
		<div class="face"></div>
	</div>
	<div class="box">
		<div class="face peace"></div><!-- peace 를 추가하면 이미지만 변경됨 -->
	</div>
</div>

- peace 를 제이쿼리로 적용 했다가 안 했다가 할 것입니다.
- img 태그에 src 를 바꿔주는 방법보다 좀 더 좋습니다.

등록된 댓글이 없습니다.

댓글 쓰기

이름 : 패스워드 :

먼저 움직이게 해보자

박스를 누르면 얼굴이 나오도록 만들어 보았습니다.
이 소스를 고쳐가면서 완성 시켜 보겠습니다.

* 적용된 기능
- 단순히 얼굴이 나오게만 함.
- 계속 누르면 계속 움직임.

?
?

CSS

.helloworld {
	text-align:center;
}
.helloworld .box {
	display:inline-block;
	height:200px;
	margin:0 10px;
	position:relative;
	width:200px;
}
.helloworld .box .label {
	background:#E6B467;
	border-radius:5px;
	border:10px outset #A37225;
	color:#9E6D20;
	cursor:pointer;
	font-size:60pt !important;
	height:100%;
	line-height:200px !important;
	position:absolute;
	text-shadow:0 0 5px white, 0 0 10px white;
	width:100%;
	z-index:10;
}
.helloworld .box .face {
	background-image:url('http://biketago.com/img/etc/huk3.gif');
	background-repeat:no-repeat;
	background-size:100%;
	background-position:center;
	height:100%;
	position:absolute;
	width:100%;
}
.helloworld .box .face.peace {
	background-image:url('http://biketago.com/img/etc/huk1.gif');
}

HTML

<div class="helloworld">
	<div class="box">
		<div class="face"></div>
		<div class="label" onclick="helloworldBros(this)">?</div>
	</div>
	<div class="box">
		<div class="face"></div>
		<div class="label" onclick="helloworldBros(this)">?</div>
	</div>
</div>

자바스크립트

function helloworldBros(o){

	var el = $(o).parent().find('.face');
	// $(o) - 클릭한 요소, o 는 클릭한 요소를 파라미터로 전달 받은것
	// $(o).parent() - 클릭한 요소의 부모
	// $(o).parent().find('.face') - 클릭한 요소의 부모에서 클래스명이 face 인것 찾기

	el.animate({'top':'-=180'}, 500, 'easeInOutCirc');
	// animate 메소드 사용하여 움직이게 하기
	// {'top':'-=180'} - 현재 위치에서 -180px 만큼 이동, top 이므로 위로 180px 이동
	// 500 - 0.5 초동안 지정된 애니메이션
	// easeInOutCirc - 이징효과, 움직임에 효과적용 (가속도, 감속 등, 수학적인 계산으로 처리되는 움직임)

}
등록된 댓글이 없습니다.

댓글 쓰기

이름 : 패스워드 :

얼굴이 나왔다가 들어가게 만들기

얼굴이 나왔다가 들어가게 만들어 보았습니다.
페이지 상단에서 봤던 것과 비슷해 졌습니다.
박스를 연타해서 어떻게 되는지 살펴보세요~! 그래야 해요~

* 적용된 기능
- 얼굴이 올라오고 잠시 멈췄다가 내려간다.
- 내려갈때 얼굴 표정이 바뀐다.
- 이 소스는 연속으로 클릭했을때 애니메이션이 중첩 실행되어 재미있는 버그가 발생한다.

?
?

CSS

.helloworld {
	text-align:center;
}
.helloworld .box {
	display:inline-block;
	height:200px;
	margin:0 10px;
	position:relative;
	width:200px;
}
.helloworld .box .label {
	background:#E6B467;
	border-radius:5px;
	border:10px outset #A37225;
	color:#9E6D20;
	cursor:pointer;
	font-size:60pt !important;
	height:100%;
	line-height:200px !important;
	position:absolute;
	text-shadow:0 0 5px white, 0 0 10px white;
	width:100%;
	z-index:10;
}
.helloworld .box .face {
	background-image:url('http://biketago.com/img/etc/huk3.gif');
	background-repeat:no-repeat;
	background-size:100%;
	background-position:center;
	height:100%;
	position:absolute;
	width:100%;
}
.helloworld .box .face.peace {
	background-image:url('http://biketago.com/img/etc/huk1.gif');
}

HTML

<div class="helloworld">
	<div class="box">
		<div class="face"></div>
		<div class="label" onclick="helloworldBros(this)">?</div>
	</div>
	<div class="box">
		<div class="face"></div>
		<div class="label" onclick="helloworldBros(this)">?</div>
	</div>
</div>

자바스크립트

function helloworldBros(o){

	var el = $(o).parent().find('.face');

	el.animate({'top':'-=180'}, 500, 'easeInOutCirc', function(){
	// function() - 위 애니메이션이 종료되면 아래 내용을 실행시킨다

		el.addClass('peace').delay(500).animate({'top':'10'}, 1000, 'easeInSine', function(){
		// .addClass('peace') - CSS paece 클래스 적용, 얼굴 변경하기
		// .delay(500) - 0.5 초 동안 멈춤 (애니메이션 사용시 적용 가능한 메서드임)
		// .animate({'top':'10'}, 1000, 'easeInSine' - top 10px 에 해당하는 위치로 1초 동안 easeInSine 효과 적용해서 움직이게 함

			el.removeClass('peace');
			// 위 애니메이션이 종료되면 peace 클래스 제거, 얼굴 표정 원래데로
		});
	});

}


- 애니메이션이 중복 실행되지 않도록 고쳐봐야겠죠?

등록된 댓글이 없습니다.

댓글 쓰기

이름 : 패스워드 :

잠시 queue(큐) 를 살펴보고 갑시다

뀨??


위 예제에서 박스를 연타했을 경우 애니메이션이 여러번 실행됩니다. 의도하지 않은 것이라 버그처럼 느껴집니다.

왜 그런 걸까요? 그건 .. 애니메이션이 실행될때 queue(큐) 라는 곳에 일종의 예약이 됩니다. 큐에 예약된 것은 순차적으로 실행이 되고 모든 실행이 다 끝나면 비워지게되죠. 박스를 연타하면 큐에 쌓이고 실행이 됩니다. 계획표 같은 것이죠.

위 예제에서 .delay(500) 같이 잠시 멈추는 메서드도 사용했는데 이것 역시 큐에 들어갑니다. 그럼 왜 큐 를 이야기 하는 걸까요? 바로 중복 실행을 막기위해서 입니다.

얼굴이 나온 상태에서 들어가기 전 까지는 클릭해도 반응하지 않도록 해주어야 합니다. 이때 큐를 체크하면 됩니다. 즉 큐에 예약이 있다면 현재 애니메이션 중인 상태인거고 없다면 놀고 있는 상태인 거죠. 큐가 있을때는 더 이상 실행이 안되게 해주면 됩니다. 그렇게 해주면 연타를 해도 무시됩니다.
등록된 댓글이 없습니다.

댓글 쓰기

이름 : 패스워드 :

큐를 체크하여 중복 실행 막기

박스를 연타해 보세요. 얼굴이 들어가기 전까지 중복실행이 되지 않습니다.

* 적용된 기능
- 얼굴이 들어가기 전까지는 클릭해도 무시된다.
- queue(큐)를 체크하면 된다. 특히 애니메이션이 순차적으로 있을 경우.

?
?

CSS

.helloworld {
	text-align:center;
}
.helloworld .box {
	display:inline-block;
	height:200px;
	margin:0 10px;
	position:relative;
	width:200px;
}
.helloworld .box .label {
	background:#E6B467;
	border-radius:5px;
	border:10px outset #A37225;
	color:#9E6D20;
	cursor:pointer;
	font-size:60pt !important;
	height:100%;
	line-height:200px !important;
	position:absolute;
	text-shadow:0 0 5px white, 0 0 10px white;
	width:100%;
	z-index:10;
}
.helloworld .box .face {
	background-image:url('http://biketago.com/img/etc/huk3.gif');
	background-repeat:no-repeat;
	background-size:100%;
	background-position:center;
	height:100%;
	position:absolute;
	width:100%;
}
.helloworld .box .face.peace {
	background-image:url('http://biketago.com/img/etc/huk1.gif');
}

HTML

<div class="helloworld">
	<div class="box">
		<div class="face"></div>
		<div class="label" onclick="helloworldBros(this)">?</div>
	</div>
	<div class="box">
		<div class="face"></div>
		<div class="label" onclick="helloworldBros(this)">?</div>
	</div>
</div>

자바스크립트

function helloworldBros(o){

	var el = $(o).parent().find('.face');

	if(el.queue().length > 0) return;
	// el.queue() - el 에서 큐를 가져옵니다.
	// el.queue().length - 큐의 길이를 봅니다. 0 이상이면 큐가 있는것.
	// 큐 갯수가 0 이상이면 return 으로 함수를 종료합니다.
	// 쉽죠?

	el.animate({'top':'-=180'}, 500, 'easeInOutCirc', function(){
		el.addClass('peace').delay(500).animate({'top':'10'}, 1000, 'easeInSine', function(){
			el.removeClass('peace');
		});
	});

}
등록된 댓글이 없습니다.

댓글 쓰기

이름 : 패스워드 :

추가 효과 : 박스를 들석 거리게 하기

박스를 클릭하면 들석 거리게 해보았습니다. 좀 더 그럴듯해 보이게 말이죠.

* 적용된 기능
- 박스 클릭시 위 아래로 애니메이션 하여 들석거리게 만든다.

?
?

CSS

.helloworld {
	text-align:center;
}
.helloworld .box {
	display:inline-block;
	height:200px;
	margin:0 10px;
	position:relative;
	width:200px;
}
.helloworld .box .label {
	background:#E6B467;
	border-radius:5px;
	border:10px outset #A37225;
	color:#9E6D20;
	cursor:pointer;
	font-size:60pt !important;
	height:100%;
	line-height:200px !important;
	position:absolute;
	text-shadow:0 0 5px white, 0 0 10px white;
	width:100%;
	z-index:10;
}
.helloworld .box .face {
	background-image:url('http://biketago.com/img/etc/huk3.gif');
	background-repeat:no-repeat;
	background-size:100%;
	background-position:center;
	height:100%;
	position:absolute;
	width:100%;
}
.helloworld .box .face.peace {
	background-image:url('http://biketago.com/img/etc/huk1.gif');
}

HTML

<div class="helloworld">
	<div class="box">
		<div class="face"></div>
		<div class="label" onclick="helloworldBros(this)">?</div>
	</div>
	<div class="box">
		<div class="face"></div>
		<div class="label" onclick="helloworldBros(this)">?</div>
	</div>
</div>

자바스크립트

function helloworldBros(o){

	var el = $(o).parent().find('.face');

	if(el.queue().length > 0) return;

	el.animate({'top':'-=180'}, 500, 'easeInOutCirc', function(){
		el.addClass('peace').delay(500).animate({'top':'10'}, 1000, 'easeInSine', function(){
			el.removeClass('peace');
		});
	});

	el.parent().animate({'top':'-=20'}, 50, function(){
	// el.parent() - el 의 부모요소
	// .animate({'top':'-=20'}, 50 - 현재위치에서 위로 20px 움직임, 0.05 초 안에

		el.parent().animate({'top':'0'}, 50);
		// 위로 20px 움직임이 끝나고 top 0 위치로 움직임, 원래 위치로 돌아오도록 함
	});
	// 위 애니메이션이 적용되면 위 아래로 들석 하는 효과가 됨

}

실행 가능한 소스

등록된 댓글이 없습니다.

댓글 쓰기

이름 : 패스워드 :

완성

드디어 완성되었습니다.
아래 예제를 잘 응용하면 두더지 게임 비슷하게 만들어 볼 수 있을 것 같습니다.
그건 숙제로 남겨두기로 할게요. (찡긋)

여기 까지 오시느라 수고 많으셨습니다.

?
?
?
?

CSS

.helloworld {
	text-align:center;
}
.helloworld .box {
	display:inline-block;
	height:200px;
	margin:0 10px;
	position:relative;
	width:200px;
}
.helloworld .box .label {
	background:#E6B467;
	border-radius:5px;
	border:10px outset #A37225;
	color:#9E6D20;
	cursor:pointer;
	font-size:60pt !important;
	height:100%;
	line-height:200px !important;
	position:absolute;
	text-shadow:0 0 5px white, 0 0 10px white;
	width:100%;
	z-index:10;
}
.helloworld .box .face {
	background-image:url('http://biketago.com/img/etc/huk3.gif');
	background-repeat:no-repeat;
	background-size:100%;
	background-position:center;
	height:100%;
	position:absolute;
	width:100%;
}
.helloworld .box .face.peace {
	background-image:url('http://biketago.com/img/etc/huk1.gif');
}

HTML

<div class="helloworld">
	<div class="box">
		<div class="face"></div>
		<div class="label" onclick="helloworldBros(this)">?</div>
	</div>
	<div class="box">
		<div class="face"></div>
		<div class="label" onclick="helloworldBros(this)">?</div>
	</div>
	<div class="box">
		<div class="face"></div>
		<div class="label" onclick="helloworldBros(this)">?</div>
	</div>
	<div class="box">
		<div class="face"></div>
		<div class="label" onclick="helloworldBros(this)">?</div>
	</div>
</div>

자바스크립트

function helloworldBros(o){

	var el = $(o).parent().find('.face');
	// $(o) - 클릭한 요소, o 는 클릭한 요소를 파라미터로 전달 받은것
	// $(o).parent() - 클릭한 요소의 부모
	// $(o).parent().find('.face') - 클릭한 요소의 부모에서 클래스명이 face 인것 찾기

	if(el.queue().length > 0) return;
	// el.queue() - el 에서 큐를 가져옵니다.
	// el.queue().length - 큐의 길이를 봅니다. 0 이상이면 큐가 있는것.
	// 큐 갯수가 0 이상이면 return 으로 함수를 종료합니다.

	el.animate({'top':'-=180'}, 500, 'easeInOutCirc', function(){
	// animate 메소드 사용하여 움직이게 하기
	// {'top':'-=180'} - 현재 위치에서 -180px 만큼 이동, top 이므로 위로 180px 이동
	// 500 - 0.5 초동안 지정된 애니메이션
	// easeInOutCirc - 이징효과, 움직임에 효과적용 (가속도, 감속 등, 수학적인 계산으로 처리되는 움직임)
	// function() - 위 애니메이션이 종료되면 아래 내용을 실행시킨다

		el.addClass('peace').delay(500).animate({'top':'10'}, 1000, 'easeInSine', function(){
		// .addClass('peace') - CSS paece 클래스 적용, 얼굴 변경하기
		// .delay(500) - 0.5 초 동안 멈춤 (애니메이션 사용시 적용 가능한 메서드임)
		// .animate({'top':'10'}, 1000, 'easeInSine' - top 10px 에 해당하는 위치로 1초 동안 easeInSine 효과 적용해서 움직이게 함

			el.removeClass('peace');
			// 위 애니메이션이 종료되면 peace 클래스 제거, 얼굴 표정 원래데로
		});
	});

	el.parent().animate({'top':'-=20'}, 50, function(){
	// el.parent() - el 의 부모요소
	// .animate({'top':'-=20'}, 50 - 현재위치에서 위로 20px 움직임, 0.05 초 안에

		el.parent().animate({'top':'0'}, 50);
		// 위로 20px 움직임이 끝나고 top 0 위치로 움직임, 원래 위치로 돌아오도록 함
	});
	// 위 애니메이션이 적용되면 위 아래로 들석 하는 효과가 됨

}

실행 가능한 소스

등록된 댓글이 없습니다.

댓글 쓰기

이름 : 패스워드 :