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

푸드트럭으로 고고!! (애니메이션 효과 두개 동시 사용)

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

시작하기 전에

이번 예제는 만들어가는 과정이 아닌 완성된 소스를 분해해(?)보는 형태입니다.
이것 저것 고쳐보면서 어떻게 실행되고 만들어져 있는지 알아보는 방식입니다.
조립이 아닌 분해입니다 !! 그럼 해볼까요? ㅎㅎ

※ 현재 작성중인 글입니다.

두개의 animate 메소드를 동시에 활용하는 예제

- 회색 박스 아래 버튼을 연타해 보세요.
- 애니메이션을 두개 동시에 적용한 예제입니다.

그런데 말입니다

예제는 단순히 박스가 떨어지면서 통통 튀기고 앞으로 전진하도록 되어있습니다.
두개의 애니메이션효과가 동시에 사용된걸 잘 보여주고 있죠.

그런데 정말 딱딱하고 재미없어 보입니다.
그래서 간단히 바꿔보겠습니다.

푸드트럭 출동 !!

좀 유치해 보이지만 이게 좀 더 보기 좋네요.
약간 더 동기가 부여된듯 합니다. 버튼을 눌러보세요~

CSS

.carbox {
	border-radius:5px;
	border:5px solid silver;
	height:500px;
	margin:0 auto;
	overflow:hidden;
	position:relative; /* .car 에서 position:absolute; 를 원하는데로 쓰기 위해 필요함 */
	width:80%;
}

.carbox .car {
	background-repeat:no-repeat;
	background-position:bottom; /* 트럭 이미지의 높이가 약간 다르기 때문에 정렬을 아래로 함 (바퀴가 무조건 바닥에 위치하게 됨) */
	bottom:100%;
	height:150px;
	position:absolute;
	width:220px;
}
.carbox .car.num1 { background-image:url('http://superkts.com/img/icon/vehicle/0096.gif'); }
.carbox .car.num2 { background-image:url('http://superkts.com/img/icon/vehicle/0097.gif'); }
.carbox .car.num3 { background-image:url('http://superkts.com/img/icon/vehicle/0098.gif'); }

HTML

<div class="carbox"></div>
<div style="text-align:center; margin-top:10px;">
	<button type="button" onclick="gogogo()">푸드트럭 출동 !!</button>
</div>

자바스크립트

function gogogo(){

	var el = $('<div class="car num' + Math.ceil(Math.random() * 3) + '"></div>').appendTo('.carbox');

	var rnd1 = Math.round(Math.random() * 20);

	el.animate({'bottom':0}, {
		duration : 2000,
		easing : 'easeOutBounce',
		queue : false
	});

	el.animate({'left':rnd1 + '%'}, {
		duration : 2000,
		easing : 'easeOutQuad',
		complete : function(){
			el.animate({'left':'100%'}, 2000, 'easeInQuart', function(){
				el.remove();
			});
		}
	});

}

실행 가능한 소스

좀 더 과격한 출동 !!

수치만 좀 변경해 주면 이렇게도 변합니다.

중력이 약한 곳에서는 이렇게 한데요

역시 수치만 좀 변경해 주면 이렇게도 변합니다.

바쁠 수록 날아가라 !!

이젠 날아갑니다.

이제 그만~

핫도그 트럭

아이스크림 트럭

과일쥬스 트럭

사용한 이미지 입니다.
자 그럼 이제 시작해 보겠습니다.

위에서 본 예제들은 소스의 수치만 조금 변경하여 다양한 연출을 해본것 입니다.
그럼 어떻게 만들었고 동작하는지 살펴 보도록 할까요?

요소(트럭)가 어떻게 생성되고 삭제되는가?

네모 박스에 트럭이 어떻게 생기고 사라지는지 눈에 보이도록 만들어 보았습니다.
박스 바깥 위에서 생성되어 떨어지고 오른쪽 밖으로 이동이 끝나면 사라지게 되어있습니다.

- "푸드트럭 출동" 버튼을 눌러서 어떻게 트럭들이 움직이는지 확인해 보세요.
- "CSS overflow" 설정을 바꿔보면서 버튼을 눌러보세요.

    CSS 설정 변경 - overflow : ;

CSS

.carbox {
	border-radius:5px;
	border:5px solid silver;
	height:400px;
	margin:0 auto;
	position:relative;
	width:700px;
}

.carbox .car {
	background-repeat:no-repeat;
	background-position:bottom;
	bottom:100%;
	height:150px;
	position:absolute;
	width:220px;
	border:1px solid blue;
}
.carbox .car.num1 { background-image:url('http://superkts.com/img/icon/vehicle/0096.gif'); }
.carbox .car.num2 { background-image:url('http://superkts.com/img/icon/vehicle/0097.gif'); }
.carbox .car.num3 { background-image:url('http://superkts.com/img/icon/vehicle/0098.gif'); }

HTML

<div class="carbox"></div>
<div style="text-align:center; margin-top:10px;">
	<button type="button" onclick="gogogo()">푸드트럭 출동 !!</button> &nbsp;&nbsp;&nbsp;
	CSS 설정 변경 - overflow :
	<select size="3" onchange="$('.carbox').css('overflow', this.value)" style="vertical-align:top;">
		<option value="visible" selected>기본값</option>
		<option value="scroll">scroll</option>
		<option value="hidden">hidden</option>
	</select>
	;
</div>

자바스크립트

function gogogo(){
	var el = $('<div class="car num' + Math.ceil(Math.random() * 3) + '"></div>').appendTo('.carbox');
	var rnd1 = Math.round(Math.random() * 20);

	el.animate({'bottom':0}, {
		duration : 2000,
		easing : 'easeOutBounce',
		queue : false
	});

	el.animate({'left':rnd1 + '%'}, {
		duration : 2000,
		easing : 'easeOutQuad',
		complete : function(){
			el.animate({'left':'100%'}, 2000, 'easeInQuart', function(){
				el.remove();
			});
		}
	});
}

실행 가능한 소스

일 동안 마감 안된 예제 ㅠㅠ

현재 작성중인 예제입니다 !!
틈틈히 하고 있습니다. ㅠㅠ

체크하고 갑니다.
곧 돌아올게요 !!