jQuery - 캔버스 애니메이션을 위한 틀

과거에는 대부분 플래시로 이미지 슬라이더를 구현했지만, 지금은 자바스크립트 만으로 구현이 가능하다. 자바스크립트로 플래시 또는 실버라이트의 시각적 효과를 구현 하려면 다음 네 가지 사항을 CSS로 미리 지정해야 한다.

1. 캔버스의 width 스타일 속성과 height 스타일 속성은 필수로 지정한다.
2. 캔버스의 position 스타일 속성은 relative로 지정한다.
3. 캔버스의 overflow 스타일 속성은 hidden으로 지정한다.
4. 구성 요소의 position 스타일 속성은 absolute로 지정한다.

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script src="jquery-3.4.1.js"></script>
<style>
* { margin: 0px; padding: 0px; }
#canvas {
background-color: gray;
width: 600px;
height: 400px;
position: relative;
overflow: hidden;
}
.inner-box {
background-color: orange;
width: 100px;
height: 100px;
position: absolute;
}
</style>
<script>
$(document).ready(function(){
$('.inner-box').each(function(index){
$(this).css({
left: index * 90,
top: index * 90
});
});
});
</script>
</head>
<body>
<h1>TEST HEADER</h1>
<div id="canvas">
<div class="inner-box"></div>
<div class="inner-box"></div>
<div class="inner-box"></div>
<div class="inner-box"></div>
<div class="inner-box"></div>
</div>
<h1>TEST HEADER</h1>
</body>
</html>

위의 코드를 실행을 하게 되면 아래와 같은 결과가 출력이 된다.

캔버스 내부의 구성 요소에 애니메이션을 적용하기에 적당한 틀이 완성이 된 것이다. 반드시 위에서 언급한 4가지 사항을 꼭 숙지하여야 한다.

이미지 슬라이더 틀.html

0.00MB

'프로그래밍 공부 > jQuery' 카테고리의 다른 글

jQuery - 이미지 슬라이더 (0)	2019.12.31
jQuery - 효과 (0)	2019.12.30
jQuery - 이벤트 下 (0)	2019.12.27
jQuery - 이벤트 上 (0)	2019.12.27
jQuery - 문서 객체 조작 (0)	2019.12.24

jQuery - 캔버스 애니메이션을 위한 틀

'프로그래밍 공부 > jQuery' 카테고리의 다른 글

'프로그래밍 공부/jQuery' Related Articles

티스토리툴바