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

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

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

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

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

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

.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('https://superkts.com/img/icon/vehicle/0096.gif'); }
.carbox .car.num2 { background-image:url('https://superkts.com/img/icon/vehicle/0097.gif'); }
.carbox .car.num3 { background-image:url('https://superkts.com/img/icon/vehicle/0098.gif'); }

<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" 설정을 바꿔보면서 버튼을 눌러보세요.

.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('https://superkts.com/img/icon/vehicle/0096.gif'); }
.carbox .car.num2 { background-image:url('https://superkts.com/img/icon/vehicle/0097.gif'); }
.carbox .car.num3 { background-image:url('https://superkts.com/img/icon/vehicle/0098.gif'); }

<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();
			});
		}
	});
}

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