달팽이가 달리는 2D 애니메이션 예제, 제이쿼리 애니메이션

※ 내용 업데이트와 홈페이지 관리 다시 시작하겠습니다. ^^;

아래 예제는 오래전 부터 운영중인 이 홈페이지의 어떤 메뉴에 사용한 것입니다.

아마 대부분의 방문자 분들께서는 검색으로 들어오신 후 해당 페이지만 보시고

나가시는 경우가 많으셔서 이런게 있을지 상상도 못하실 겁니다. ^^;;

http://www.superkts.pe.kr/dal_run2/run2_main.html

위 주소에서 사용한 것인데.. 제이쿼리 버젼으로 특정 부분만 빼내서 만들어 보았습니다.

제이쿼리의 애니메이션 메소드를 사용하지 않고 css 설정을 바꿔주는 방식으로 구현하였습니다.

애니메이션이라고는 하지만 그냥 배경을 움직여 주는 정도 입니다.

2D게임 처럼 배경이 다중 스크롤 됩니다. 그림은 모두 직접 제작했었습니다. 2003년도에 만들었죠 ^^;

오래전엔 이것을 만들때 기술력(?)이 부족해서 페이지를 만들어 놓고

아이프레임에 스크롤바가 나오지 않게 설정하고 불러와서 사용했습니다.

하지만 지금은 그냥 DIV 태그로 감싸서 만들어 보았습니다. 그럼 한번 구경해 보세요 ^^

그리고 이 홈페이지 메인은 더 거대한 에니메이션이 있습니다.

http://www.superkts.pe.kr/ 입니다.

그럼 ! ^^&

예제

+ 오늘도 열심히 달리는 달팽이 (이 홈페이지의 캐릭터입니다) +

소스

<style type="text/css">

	#screen { background-image:url('http://superkts.pe.kr/img/helper/land_bg.gif'); position:relative; width:500px; height:300px; margin:0 auto; overflow:hidden; border:2px solid black; border-radius:5px; }
	#screen div { position:absolute; white-space:nowrap; }

</style>

<script type="text/javascript">

	function animate(){
		$('#bg1').css('left', '+=1');
		if($('#bg1').position().left >= 500) $('#bg1').css('left', '-600px');

		$('#bg2').css('left', '+=2');
		if($('#bg2').position().left >= 0) $('#bg2').css('left', '-500px');

		$('#bg3').css('left', '+=3');
		if($('#bg3').position().left >= 0) $('#bg3').css('left', '-583px');

		$('#bg4').css('left', '+=5');
		if($('#bg4').position().left >= 0) $('#bg4').css('left', '-500px');

		$('#sprite1').css('left', '-=1');
		if($('#sprite1').position().left < -100) $('#sprite1').css('left', '500px');

		$('#sprite2').css('left', '-=3');
		if($('#sprite2').position().left < -100) $('#sprite2').css('left', '500px');

		$('#sprite3').css('left', '-=4');
		if($('#sprite3').position().left < -100) $('#sprite3').css('left', '500px');
	}

	setInterval(animate, 50);

</script>

<div id="screen">
	<div id="bg1" style="top:50px; left:0;">
		<img src="http://superkts.pe.kr/img/helper/land04.gif" />
	</div>
	<div id="sprite3" style="top:140px; left:500px;">
		<img src="http://superkts.pe.kr/img/helper/runner.gif" />
	</div>
	<div id="bg2" style="top:180px; left:-500px;">
		<img src="http://superkts.pe.kr/img/helper/land03.gif" /><img src="http://superkts.pe.kr/img/helper/land03.gif" />
	</div>
	<div id="bg3" style="top:220px; left:-583px;">
		<img src="http://superkts.pe.kr/img/helper/land02.gif" /><img src="http://superkts.pe.kr/img/helper/land02.gif" />
	</div>
	<div id="sprite1" style="top:170px; left:400px;">
		<img src="http://superkts.pe.kr/img/helper/runner.gif" />
	</div>
	<div id="sprite2" style="top:185px; left:200px;">
		<img src="http://superkts.pe.kr/img/helper/runner.gif" />
	</div>
	<div id="bg4" style="top:250px; left:-500px;">
		<img src="http://superkts.pe.kr/img/helper/land01.gif" /><img src="http://superkts.pe.kr/img/helper/land01.gif" />
	</div>
</div>

<div style="margin-top:20px; text-align:center;">+ 오늘도 열심히 달리는 달팽이 (이 홈페이지의 캐릭터입니다) +</div>

<style type="text/css">

	#screen { background-image:url('http://superkts.pe.kr/img/helper/land_bg.gif'); position:relative; width:500px; height:300px; margin:0 auto; overflow:hidden; border:2px solid black; border-radius:5px; }
	#screen div { position:absolute; white-space:nowrap; }

</style>

<script type="text/javascript">

	function animate(){
		$('#bg1').css('left', '+=1');
		if($('#bg1').position().left >= 500) $('#bg1').css('left', '-600px');

		$('#bg2').css('left', '+=2');
		if($('#bg2').position().left >= 0) $('#bg2').css('left', '-500px');

		$('#bg3').css('left', '+=3');
		if($('#bg3').position().left >= 0) $('#bg3').css('left', '-583px');

		$('#bg4').css('left', '+=5');
		if($('#bg4').position().left >= 0) $('#bg4').css('left', '-500px');

		$('#sprite1').css('left', '-=1');
		if($('#sprite1').position().left < -100) $('#sprite1').css('left', '500px');

		$('#sprite2').css('left', '-=3');
		if($('#sprite2').position().left < -100) $('#sprite2').css('left', '500px');

		$('#sprite3').css('left', '-=4');
		if($('#sprite3').position().left < -100) $('#sprite3').css('left', '500px');
	}

	setInterval(animate, 50);

</script>

<div id="screen">
	<div id="bg1" style="top:50px; left:0;">
		<img src="http://superkts.pe.kr/img/helper/land04.gif" />
	</div>
	<div id="sprite3" style="top:140px; left:500px;">
		<img src="http://superkts.pe.kr/img/helper/runner.gif" />
	</div>
	<div id="bg2" style="top:180px; left:-500px;">
		<img src="http://superkts.pe.kr/img/helper/land03.gif" /><img src="http://superkts.pe.kr/img/helper/land03.gif" />
	</div>
	<div id="bg3" style="top:220px; left:-583px;">
		<img src="http://superkts.pe.kr/img/helper/land02.gif" /><img src="http://superkts.pe.kr/img/helper/land02.gif" />
	</div>
	<div id="sprite1" style="top:170px; left:400px;">
		<img src="http://superkts.pe.kr/img/helper/runner.gif" />
	</div>
	<div id="sprite2" style="top:185px; left:200px;">
		<img src="http://superkts.pe.kr/img/helper/runner.gif" />
	</div>
	<div id="bg4" style="top:250px; left:-500px;">
		<img src="http://superkts.pe.kr/img/helper/land01.gif" /><img src="http://superkts.pe.kr/img/helper/land01.gif" />
	</div>
</div>

<div style="margin-top:20px; text-align:center;">+ 오늘도 열심히 달리는 달팽이 (이 홈페이지의 캐릭터입니다) +</div>

관련글 모음 (제이쿼리 애니메이션 예제 모음)

☞ 달팽이홈2

등록일 : 2014-12-24