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

에일리언 입을 움직여보자 (jQuery UI 슬라이더 사용)

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

jQuery 슬라이더의 평범한(?) 예제

아래 슬라이더를 움직여 보세요.
이 예제가 너무 평범했던 것일까요?
슬라이더를 움직여 봐요

뭔가 부족할땐?

그래서 다른 것을 만들어 보기로 했습니다.
그 과정을 하나씩 보여드리겠습니다.

과연~ 슬라이더로 뭘하면 잘한걸까요? ㅎㅎ

※ 이 예제는 jQuery UI 슬라이더를 사용합니다.

에일리언 움짤을 인터넷에서 찾기

평범한 에일리언 입니다. 네 그렇죠.
이 이미지로 뭘 하면 될까요?

필요한 부분 얻기

배경으로 사용할 이미지 추출, 2배 확대

입 부분 잘라내서 편집 (입이라고 부를게요), 투명 영역이 있는 PNG 파일로 제작


필요한 부분을 가져왔습니다.
입 부분 편집이 좀 대충인건 양해 부탁드립니다.
뭘 하려고 하는지 감이 오시죠? ㅎㅎ

기본 셋팅

div 를 하나 만들고 배경으로 준비한 이미지를 넣어봅니다.

CSS

/* 배경으로 이미지 넣기 */
.alien {
	width:700px;
	height:290px;
	background:url('/ufiles/story_data/122be5e3c13f6fe6f4f048fb461853dbcffd5a26.jpg') no-repeat;
	border:7px solid red;
	border-radius:5px;
}

HTML

<div class="alien"></div>

입도 넣어주기

입을 넣어 봅니다. 좀 그럴듯 하네요 !?

CSS

.alien {
	width:700px;
	height:290px;
	background:url('/ufiles/story_data/122be5e3c13f6fe6f4f048fb461853dbcffd5a26.jpg') no-repeat;
	border:7px solid red;
	border-radius:5px;
}

/* 입 추가 */
.alien .mouth {
	width:296px;
	height:271px;
	background:url('/ufiles/story_data/691911bd2479a538d781c215431f663f25c501b1.png') no-repeat;
}

HTML

<div class="alien">
	<div class="mouth"></div><!-- 입 추가 -->
</div>

입 위치 조절하기

입을 적당한 위치로 이동시킵니다.
그러면 입이 빨간 네모를 벗어납니다.
이것도 고쳐야겠죠.

CSS

.alien {
	width:700px;
	height:290px;
	background:url('/ufiles/story_data/122be5e3c13f6fe6f4f048fb461853dbcffd5a26.jpg') no-repeat;
	border:7px solid red;
	border-radius:5px;
	position:relative;/* 위치 조절을 사용하기 위해 필요 */
}

.alien .mouth {
	width:296px;
	height:271px;
	background:url('/ufiles/story_data/691911bd2479a538d781c215431f663f25c501b1.png') no-repeat;

	position:absolute;/* 위치 조절을 사용하기 위해 필요 */
	/* 입 위치 설정 */
	top:-120px;
	left:-120px;
}

HTML

<div class="alien">
	<div class="mouth"></div><!-- 입 -->
</div>

벗어나는 부분 안보이게 하기

벗어나는 부분은 안보이게 했지만 뭔가 부족합니다.
보이지 말아야 할 나머지 부분도 숨겨야 겠죠.

CSS

.alien {
	width:700px;
	height:290px;
	background:url('/ufiles/story_data/122be5e3c13f6fe6f4f048fb461853dbcffd5a26.jpg') no-repeat;
	border:7px solid red;
	border-radius:5px;
	position:relative;
	overflow:hidden; /* 벗어나는 영역 숨기기 */
}

.alien .mouth {
	width:296px;
	height:271px;
	background:url('/ufiles/story_data/691911bd2479a538d781c215431f663f25c501b1.png') no-repeat;
	position:absolute;
	top:-120px;
	left:-120px;
}

HTML

<div class="alien">
	<div class="mouth"></div><!-- 입 -->
</div>

입 나머지 보이는 부분을 가리기 위한 이미지 추가하기

위 배경 이미지에서 필요한 부분을 자릅니다. (왼쪽 위 부분)

잘라내고 약간 편집, 투명 영역이 있는 PNG 파일로 편집함.


이미지를 하나 더 준비합니다.
얼굴 부분을 조금 잘라낸 이미지 인데
이걸로 입을 덮을 겁니다.

보이는 입 덮기

잘라낸 이미지를 배치해서 입 위에 올리면
자연스럽게 덮어집니다.

자~ 이제 기본 준비는 끝났습니다.
이제 입을 움직이게 해봐야겠죠.

기본 준비는 CSS 만 사용해서 완료했습니다.

CSS

.alien {
	width:700px;
	height:290px;
	background:url('/ufiles/story_data/122be5e3c13f6fe6f4f048fb461853dbcffd5a26.jpg') no-repeat;
	border:7px solid red;
	border-radius:5px;
	position:relative;
	overflow:hidden;
}

.alien .mouth {
	width:296px;
	height:271px;
	background:url('/ufiles/story_data/691911bd2479a538d781c215431f663f25c501b1.png') no-repeat;
	position:absolute;
	top:-120px;
	left:-120px;
	z-index:0; /* 표시 순서 설정 */
}

/* 입 덮기 */
.alien .face {
	width:300px;
	height:300px;
	background:url('/ufiles/story_data/2ab8f010fabae080f5ea7df7d1431e03ec350ef0.png') no-repeat;
	position:absolute;
	z-index:1; /* 표시 순서 설정 */
}

HTML

<div class="alien">
	<div class="face"></div><!-- 입 덮기 -->
	<div class="mouth"></div>
</div>

슬라이더를 달아서 입 움직이게 하기

아.. 이거 좀 그럴듯 하네요 ㅋㅋ
슬라이더를 마구 움직여 보세요.

CSS

.alien {
	width:700px;
	height:290px;
	background:url('/ufiles/story_data/122be5e3c13f6fe6f4f048fb461853dbcffd5a26.jpg') no-repeat;
	border:7px solid red;
	border-radius:5px;
	position:relative;
	overflow:hidden;
}
.alien .mouth {
	width:296px;
	height:271px;
	background:url('/ufiles/story_data/691911bd2479a538d781c215431f663f25c501b1.png') no-repeat;
	position:absolute;
	top:-120px;
	left:-120px;
	z-index:0;
}
.alien .face {
	width:300px;
	height:300px;
	background:url('/ufiles/story_data/2ab8f010fabae080f5ea7df7d1431e03ec350ef0.png') no-repeat;
	position:absolute;
	z-index:1;
}

/* 슬라이더 */
#slider { width:200px; margin:0 auto 20px auto; }

HTML

<div id="slider"></div><!-- 슬라이더 -->

<div class="alien">
	<div class="face"></div>
	<div class="mouth"></div>
</div>

자바스크립트

// 슬라이더 생성
$('#slider').slider({
	min : 0,
	max : 170,
	value : 0,

	// 슬라이더를 움직이면 실행
	slide : function(event, ui){
		// margin-top, margin-left 의 수치를 변경하여 움직임 효과
		$('.alien .mouth').css({'margin-top':ui.value, 'margin-left':ui.value});
	}
});

마무리

간단한(?) 코드로 나름 재미있는것을 만들어 보았습니다.
어디에 사용해야할지는 모르겠지만...

여러 가지를 이해하는데 도움이 되었으면 합니다.
그럼 오늘도 즐거운 !! 웹 ~! 개발 ~!

영원히 고통받는 리플리 ...


리플리 : 아놔~ 그만해 ~~!

등록된 댓글이 없습니다.

댓글 쓰기

이름 : 패스워드 :

서비스 : 사용한 이미지 모음

;;;

형이 왜 거기서 나와