고정 헤더 영역
 |
 |
 |
 |
 |
 |
 |
상세 컨텐츠
본문
반응형
웹페이지 내의 각 엘리먼트에 움직임을 줄 수 있는 jQuery plugin 을 소개합니다.
위 사이트에서 보듯이 GSGD 에서 개발하여 오픈소스로 제공하며, CDN 도 제공하고 있습니다.
아래 코드가 기능데모 코드입니다. 그대로 복사해서 테스트 해보셔도 되고,
첨부파일 다운로드 받아서 example 폴더에 있는 example.html 파일을 실행시켜보면
간단하게 기능을 확인할 수 있습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../jquery.easing.js"></script>
<script type="text/javascript" src="../jquery.easing.compatibility.js"></script>
<script type="text/javascript">
$(function() {
var boing = function() {
$('#boxing')
.animate({marginLeft: '50px' }, 1000, 'easeOutElastic')
.animate({marginTop: '50px' }, 1000, 'easeOutBounce')
.animate({marginLeft: '-150px'}, 1000, 'easeOutQuad')
.animate({marginTop: '-150px'}, 1000, 'easeInOutBack');
};
var squish = function() {
$('#box')
.animate({height: '100px', marginTop: '0px', width: '50px' }, 1000, 'easeOutElastic')
.animate({height: '50px' , marginTop: '25px', width: '50px' }, 1000, 'easeOutBounce')
.animate({height: '50px' , marginTop: '25px', width: '100px'}, 1000, 'easeOutQuad')
.animate({height:'100px' , marginTop: '0px', width: '100px'}, 1000, 'easeInOutBack');
}
setInterval(boing, 4000);
setInterval(squish, 4000);
setTimeout(function() {
boing();
squish();
}, 500);
})
</script>
<style type="text/css" media="screen">
#boxing {
height:100px;
width:100px;
position:absolute;
top:50%;left:50%;
margin-left:-150px;
margin-top:-150px;
}
#box {
height:100px;
width:100px;
background:#000;
margin:0 auto;
}
</style>
</head>
<body>
<div id="boxing"><div id="box"></div></div>
</body>
</html>
아래 사이트에 공개되어 있다
https://github.com/gdsmith/jquery.easing
|
cs |
jQuery easing plugin 은 비교적 단순한 기능만을 제공하지만, greensock 에서 제공하는 API는
아주 다양하고 복잡한 움직임까지 제공합니다.
반응형
'IT공부방 > jQuery, ajax, java' 카테고리의 다른 글
| AngularJS 자바스크립트 라이브러리 살펴보기 (0) | 2016.07.29 |
|---|---|
| jQuery FileUpload Plugin ... Multiple 가능, 미리보기 가능 (0) | 2016.07.28 |
| jQuery 함수 resize() removeClass() eq() attr() data() html() (0) | 2016.07.25 |
| jPlayer > jQuery HTML5 Audio / Video Library (0) | 2016.07.23 |
| jQuery 함수 preventDefault() bind() setTimeout() createElement() (0) | 2016.07.22 |
댓글 영역