URL : https://ktsmemo.cafe24.com/s/jquery/129

등록일 : 2017년 2월 14일(화) 1,031일(약 2년) 전

달려라 멍멍 !!

뭐 달려야 한다고??

밑에 많은 강아지들이 달리고 있습니다.
이걸 만들어 보겠습니다.
그럼 달려보실까요?

준비물 : 적절한 애니메이션 GIF 이미지

우연히 이 GIF 애니메이션 이미지를 보고 이 예제를 만들어보게 되었습니다.

※ 이미지 원본 출처는 모르겠습니다. ㄷㄷ

시작 : 박스 만들기

강아지들이 달릴 박스를 만듭니다.
DIV 태그와 CSS 를 이용하여 뚝딱 만들었네요.

CSS 에 width 를 적용하지 않아서 포함된 영역에 꽉 차도록 했습니다.

CSS

.dog_land {
	border-radius:5px; /* 모서리 둥글게 */
	border:5px solid silver; /* 두께 5px 회색 테두리 */
	height:200px;
}

HTML

<div class="dog_land"></div>

박스에 강아지 이미지 배경으로 지정하기

이미지를 배경으로 넣는 방법을 사용했습니다.
음 .. 난리가 났네요.

정리 좀 해야겠죠?

CSS

.dog_land {
	background-image:url('//ktsmemo.cafe24.com/img/dog_run.gif');
	background-position:center; /* 이미지 가운데 정렬 */
	border-radius:5px; /* 모서리 둥글게 */
	border:5px solid silver; /* 두께 5px 회색 테두리 */
	height:200px;
}

HTML

<div class="dog_land"></div>

박스에 강아지 적당히 넣기

CSS 설정 background-repeat : repeat-x; 를 사용해서
가로로만 반복 되도록 했습니다.

이제 달리게만 해주면 되겠죠?

CSS

.dog_land {
	background-image:url('//ktsmemo.cafe24.com/img/dog_run.gif');
	background-position:center;
	background-repeat:repeat-x; /* 배경이미지 가로로 반복 */
	border-radius:5px;
	border:5px solid silver;
	height:200px;
}

HTML

<div class="dog_land"></div>

링크 : CSS 공작소

background-repeat 예제

제이쿼리로 달리게 하자

$('.dog_land').css({ 'background-position' : '-=2' });

이런 간단한 소스로 강아지들을 달리게 만들 수 있습니다.
background-position 의 값을 계속 줄여주면 배경으로 설정된 강아지들이 왼쪽으로 이동합니다.
가로 반복으로 지정되어 있으므로 계속 달려나오는 것처럼 보입니다.

-=2 는 현재값 에서 -2 만큼 해주라는 의미입니다. 현재값을 따로 알 필요없어서 편리한 방법입니다.

오른쪽에서 계속 강아지들이 뛰어 나오고 있죠.
스크립트 처리대신 CSS로 간단히 이런 효과를 적용했습니다.
배경이미지 가로 반복 효과입니다.

이 예제는 CSS속성 간단히 응용 + 적절한 제이쿼리 조합 입니다.

그런데 이걸 어디에 쓰면 좋을까요? ...
그것은 글을 보시는 분들의 몫으로 남겨두겠습니다. (찡긋)

CSS

.dog_land {
	background-image:url('//ktsmemo.cafe24.com/img/dog_run.gif');
	background-position:center;
	background-repeat:repeat-x; /* 배경이미지 가로로 반복 */
	border-radius:5px;
	border:5px solid silver;
	height:200px;
}

HTML

<div class="dog_land"></div>

자바스크립트

// setInterval 을 이용해서 계속 실행
setInterval(function(){
	$('.dog_land').css({ 'background-position' : '-=2' });
}, 20);

자 그럼 여기서 예제를 마치겠습니다.
감사합니다 !!

실행 가능한 소스

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery(제이쿼리) 강좌와 예제모음 : 만들어보기 : 귀여운 강아지들을 달리게 해보자</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

<div style="text-align:center; margin:0 0 100px 0; background:#555; line-height:80px;">
	<a style="color:#fff; font-weight:bold; font-family:tahoma; font-size:20pt;" href="https://ktsmemo.cafe24.com/s/jquery/129" target="_blank">https://ktsmemo.cafe24.com/s/jquery/129</a>
</div>


<!-- 예제 시작 -->

<style type="text/css">

	.dog_land {
		background-image:url('//ktsmemo.cafe24.com/img/dog_run.gif');
		background-position:center;
		background-repeat:repeat-x; /* 배경이미지 가로로 반복 */
		border-radius:5px;
		border:5px solid silver;
		height:200px;
	}

</style>

<div class="dog_land"></div>

<script>

	// setInterval 을 이용해서 계속 실행
	setInterval(function(){
		$('.dog_land').css({ 'background-position' : '-=2' });
	}, 20);

</script>

<!-- 예제 종료 -->


</body>
</html>

링크 : CSS 공작소

background-repeat 예제

그냥 끝나면 심심하니 응용해보기 1

아래 버튼을 눌러보세요 ~!

CSS

.dog_land {
	background-image:url('//ktsmemo.cafe24.com/img/dog_run.gif');
	background-position:center;
	background-repeat:repeat-x; /* 배경이미지 가로로 반복 */
	background-size:724px; /* 이미지 원래 사이즈보다 2배 크게 설정 (가로기준) */
	bottom:0; /* 하단 기준 0 위치로 */
	height:200px;
	left:0;
	position:fixed; /* 위치 고정 (스크롤해도 이동 하지 않음) */
	width:100%; /* position:fixed 일때는 너비를 지정해 줘야 함 */
	display:none;
	z-index:100;
}

HTML

<div class="dog_land"></div>
<button type="button" class="" onclick="$('.dog_land').slideDown()">달려!!</button>
<button type="button" class="" onclick="$('.dog_land').slideUp()">그만!!</button>

자바스크립트

// setInterval 을 이용해서 계속 실행
setInterval(function(){
	$('.dog_land').css({ 'background-position' : '-=7' });
}, 20);

실행 가능한 소스

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery(제이쿼리) 강좌와 예제모음 : 만들어보기 : 귀여운 강아지들을 달리게 해보자</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

<div style="text-align:center; margin:0 0 100px 0; background:#555; line-height:80px;">
	<a style="color:#fff; font-weight:bold; font-family:tahoma; font-size:20pt;" href="https://ktsmemo.cafe24.com/s/jquery/129" target="_blank">https://ktsmemo.cafe24.com/s/jquery/129</a>
</div>


<!-- 예제 시작 -->

<style type="text/css">

.dog_land {
	background-image:url('//ktsmemo.cafe24.com/img/dog_run.gif');
	background-position:center;
	background-repeat:repeat-x; /* 배경이미지 가로로 반복 */
	background-size:724px; /* 이미지 원래 사이즈보다 2배 크게 설정 (가로기준) */
	bottom:0; /* 하단 기준 0 위치로 */
	height:200px;
	left:0;
	position:fixed; /* 위치 고정 (스크롤해도 이동 하지 않음) */
	width:100%; /* position:fixed 일때는 너비를 지정해 줘야 함 */
	display:none;
	z-index:100;
}

</style>

<div class="dog_land"></div>
<button type="button" class="" onclick="$('.dog_land').slideDown()">달려!!</button>
<button type="button" class="" onclick="$('.dog_land').slideUp()">그만!!</button>

<script>

	// setInterval 을 이용해서 계속 실행
	setInterval(function(){
		$('.dog_land').css({ 'background-position' : '-=7' });
	}, 20);

</script>

<!-- 예제 종료 -->


</body>
</html>

링크 : CSS 공작소

background-repeat 예제

그냥 끝나면 심심하니 응용해보기 2

카톡개 프로도를 소환해 봅시다.

CSS

.dog_land {
	background-image:url('//ktsmemo.cafe24.com/img/prodo.png');
	background-position:center;
	background-repeat:repeat-x; /* 배경이미지 가로로 반복 */
	background-size:contain; /* 이미지가 잘리지 않는 범위에서 다 보이도록 꽉 채우기 */
	cursor:pointer;
	display:none;
	height:100%;
	left:0;
	position:fixed; /* 위치 고정 (스크롤해도 이동 하지 않음) */
	top:0;
	width:100%; /* position:fixed 일때는 너비를 지정해 줘야 함 */
	z-index:10;
}

HTML

<div class="dog_land" onclick="$('.dog_land').fadeOut(500)"></div>
<button type="button" onclick="$('.dog_land').fadeIn(500)">나와주세요 !!</button>

자바스크립트

// setInterval 을 이용해서 계속 실행
setInterval(function(){
	$('.dog_land').css({ 'background-position' : '-=5' });
}, 20);

실행 가능한 소스

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery(제이쿼리) 강좌와 예제모음 : 만들어보기 : 귀여운 강아지들을 달리게 해보자</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

<div style="text-align:center; margin:0 0 100px 0; background:#555; line-height:80px;">
	<a style="color:#fff; font-weight:bold; font-family:tahoma; font-size:20pt;" href="https://ktsmemo.cafe24.com/s/jquery/129" target="_blank">https://ktsmemo.cafe24.com/s/jquery/129</a>
</div>


<!-- 예제 시작 -->

<style type="text/css">

.dog_land {
	background-image:url('//ktsmemo.cafe24.com/img/prodo.png');
	background-position:center;
	background-repeat:repeat-x; /* 배경이미지 가로로 반복 */
	background-size:contain; /* 이미지가 잘리지 않는 범위에서 다 보이도록 꽉 채우기 */
	cursor:pointer;
	display:none;
	height:100%;
	left:0;
	position:fixed; /* 위치 고정 (스크롤해도 이동 하지 않음) */
	top:0;
	width:100%; /* position:fixed 일때는 너비를 지정해 줘야 함 */
	z-index:10;
}

</style>

<div class="dog_land" onclick="$('.dog_land').fadeOut(500)"></div>
<button type="button" onclick="$('.dog_land').fadeIn(500)">나와주세요 !!</button>

<script>

	// setInterval 을 이용해서 계속 실행
	setInterval(function(){
		$('.dog_land').css({ 'background-position' : '-=5' });
	}, 20);

</script>

<!-- 예제 종료 -->


</body>
</html>

링크 : CSS 공작소

background-repeat 예제

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

달리는 강아지들

카톡개 프로도

방문해 주셔서 감사드립니다. ^^*

친절한 설명 감사드립니다~~~

┗

방문과 글 감사드립니다 ^^
더 많은 예제를 올려보도록 해볼게요 !!

좋은정보 감사합니다

┗

방문해 주셔서 감사드립니다. *^^*

아니 이분 다른 게시물도 그렇고 재능낭비하시네ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 근데 재밌는 글이라 그런지 더 이해하기 쉽네여ㅋㅋㅋㅋㅋㅋㅋ

┗

댓글 감사드립니다. 더 재미있는 예제를 언젠가 더 올려보겠습니다. ^^;;;
꾸준함 이란게 참 어렵네요. 댓글 달릴때마다 힘을 얻습니다 !!

댓글 쓰기

이름 : 패스워드 :

방문해 주셔서 감사드립니다 !!

★ 각종 쉽고 편리한 계산기 링크 ★

만나이 계산기 띠동갑 계산기 디데이 계산기 기념일 계산기 날짜 +- 계산기 날짜 차이 계산기 수능 디데이 양력 → 음력 음력 → 양력