devil cat everdevel character

프로그래머가 아니던 시절 만들기 시작한 에버디벨 !
첫 오픈 한달과 최근 한달의 방문자수를 비교해보니 무려 190배 이상 증가했습니다.
그 사이 어느새 1년 9개월의 경력을 갖고 있는 프로그래머가 되었습니다.
실무의 경험을 담아 더 많은 내용으로 올해 언젠가 에버디벨이 책으로 나옵니다.
{HTML5, CSS3, jQuery, MySQL5, PHP7(PDO, OOP, MVC)}
아무것도 몰라도 컴퓨터만 있다면 하나부터 학습하며 발전해 나가는 자신을 보는 감동을 드리겠습니다.

disney Teyon kin

애니메이션 효과

animate()

이번 시간에는 요소를 이동 시켜보는 것을 연습해 보겠습니다.

위에 박스 하나가 자신의 색을 바꿔 가면서 이동을 해가면서 원위치로 돌아가는것 보이시죠? 저것이 바로 animate()입니다.

그럼 animate()에 대해서 공부해 봅시다.

jQuery

$('.hello').animate({
  top:100,
  left:200
});

위의 소스는 어떤 특정 요소를 아래로 이동시키는 소스 입니다.

HTML

<div class="hello"></div>

CSS

.hello{width:100px; height:50px; background:pink; position:absolute; top:50px; left:50px}

위와 같이 코딩을 하면 아래의 소스가 되겠죠? 웹에서 보기 버튼을 눌러서 결과를 확인 해보시기 바랍니다.

Source

<!doctype html>
<html>
<head>
<title>
웹 에디터에서 제이쿼리 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.
</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js" ></script>
<script type="text/javascript">
$(function(){
  $('.hello').animate({
	 top:100,
   left:200
	});
});
</script>
<style type="text/css">
.hello{width:100px; height:50px; background:pink; position:absolute; top:50px; left:50px}
</style>
</head>
<body>
<div class="hello"></div>
</body>
</html>

시간 조정 하기

$('.class_Name').animate({
},시간값);

위의 예제에 시간값을 5초로 설정하여 넣어 본다면

$('.hello').animate({
  top:100,
  left:200
},5000);

아래 소스를 테스트 해보도록 하자

<!doctype html>
<html>
<head>
<title>
웹 에디터에서 제이쿼리 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.
</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js" ></script>
<script type="text/javascript">
$(function(){
  $('.hello').animate({
    top:100,
  	left:200
  },5000);
});
</script>
<style type="text/css">
.hello{width:100px; height:50px; background:pink; position:absolute; top:50px; left:50px}
</style>
</head>
<body>
<div class="hello"></div>
</body>
</html>

위치한 좌표까지 도달하는데 5초가 소요된다.

이걸 응용하여 어려가지 자신이 원하는 것을 만들 수 있다.

그러면 위의 소스에서 저렇게 이동을 한 후에 다시 무언가가 발생하길 원한다면 어떻게 해야 할까?

다시 원위치 하는 것을 해보도록하자.

어떤 행위가 끝나고 이어서 다른 행위를 시작하기

					function(){};

이부분을 animate({});의 {}가 끝난후에 넣어 준다.
단, function(){}의 앞에 ,을 넣어준다.

animate({

 },function(){
 
 };
});

그리고 어떠한 행위를 function(){};의 {}안에 넣어준다.

$('.hello').animate({
  top:50,
  left:50
});

위의 소스를 적용해본다면

$('.class_Name').animate({
  },function(){
    $('.hello').animate({
      top:50,
      left:50
      });
  };
);

그럼 실제 적용 해보도록 하자

<!doctype html>
<html>
<head>
<title>
웹 에디터에서 제이쿼리 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.
</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js" ></script>
<script type="text/javascript">
$(function(){
$('.hello').animate({
top:100,
left:200
},function(){
$('.hello').animate({
top:50,
left:50
});
});
});
</script>
<style type="text/css">
.hello{width:100px; height:50px; background:pink; position:absolute; top:50px; left:50px}
</style>
</head>
<body>
<div class="hello"></div>
</body>
</html>

이렇게 응용하면 이 강좌 제일 위에 위치한 핫핑크색의 박스의 움직임도 구현할 수 있다.

이걸로 애니메이션효과에 대한 강좌를 마치겠습니다.

다음강좌는 9강.내용 변경 하기 입니다. 클릭하면 다음 강좌로 이동합니다.