안녕하세요.
jquery animate 함수를 이용하여 이미지를 움직이려고 했더니, 이미지가 포물선을 그리며 움직이는게 힘들어서,
구글 검색을 통해 찾은 parabola.js 를 이용하여 포물선으로 이미지를 움직였습니다.
Parabola Trajectory Examples 예제를 이용 하였습니다(https://github.com/guins/parabolajs)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parabola Trajectory Examples</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.dot {
position: absolute;
left: 0px;
top: 500px;
}
.scaleAnimation { // onFinish에 해당 css를 추가
animation: myScale .7s forwards;
-webkit-animation myScale .7s forwards;
}
@keyframes myScale //이미지가 마지막에 도달하면 해당 css를 통해 작아젓다 커졋다 효과를 부여.
{
from {transform: scale(1);}
20% {transform: scale(1.3);}
65% {transform: scale(0.6);}
90% {transform: scale(1.4);}
to {transform: scale(0);}
}
@-webkit-keyframes myScale
{
from {transform: scale(1);}
20% {transform: scale(1.3);}
65% {transform: scale(0.6);}
90% {transform: scale(1.2);}
to {transform: scale(0);}
}
</style>
<script type="text/javascript" src="parabola.js"></script>
</head>
<body>
<button>Run</button>
<i class="dot"><img id="img_test" src="Star_1.png" style="width:30px"/></i> // dog class 안에 이미지가 포물선으로 날아갑니다.
<script type="text/javascript">
var btn = document.querySelector('button');
var target = document.querySelector('.dot');
var mini = 30;
var start = 1;
var parabola = new Parabola({
startPos: {
left: 0,
top: 500
},
endPos: {
left: 500,
top: 0
},
onStep (pos) {
if((start % 5) == 0){ // 이부분은 기존 이미지를 포물선으로 날아가면 작아지게 만드려고 넣었습니다.
mini = mini -1;
img_test.style.width = mini+"px";
}
start++;
target.style.left = pos.left + 'px';
target.style.top = pos.top + 'px';
},
timingFunction: 'easeInOut',
onFinish (pos) {
target.classList.add('scaleAnimation');
}
});
// parabola.start();
btn.addEventListener('click', function () {
target.classList.remove('scaleAnimation');
parabola.start();
}, false);
</script>
</body>
</html>
해당 예제에서 제가 필요한 부분만 바꿔서 적용했습니다.
^_^
'javascript' 카테고리의 다른 글
| javascript 동적 변수 선언 eval (0) | 2019.12.26 |
|---|---|
| (javascipt) 팝업 닫기시 유투브 영상 종료하기. (0) | 2018.02.20 |
| 모바일 ios에서 iframe width:100% 안 될때. (2) | 2017.12.27 |
| javascript 애드센스 다는 방법 - 초급 (0) | 2017.08.24 |
| datatables 헤더 resize 시키기. (0) | 2017.07.12 |