[javascript] Velocity.js를 사용하여 요소의 곡선 경로를 따라 이동시키는 방법은?
Velocity.js는 요소의 애니메이션 효과를 쉽게 추가할 수 있는 라이브러리입니다. 이 라이브러리를 사용하여 요소를 직선이 아닌 곡선 경로를 따라 이동시킬 수 있습니다. 다음은 Velocity.js를 사용하여 요소를 곡선 경로를 따라 이동시키는 방법에 대한 예제입니다.
먼저, HTML 파일에 요소를 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Velocity.js 곡선 이동</title>
<style>
.ball {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div class="ball"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.6/velocity.min.js"></script>
<script src="script.js"></script>
</body>
</html>
다음으로, script.js
파일에 Velocity.js를 사용하여 곡선 경로를 따라 요소를 이동시키는 코드를 작성합니다.
$(document).ready(function() {
$('.ball').velocity({
translateX: '200px',
translateY: '200px'
}, {
duration: 1000,
easing: 'easeInSine'
});
});
이 코드는 요소를 직선으로 이동시키는 것이 아니라 translateX
및 translateY
속성을 사용하여 곡선 경로를 따라 이동시킵니다. easing
속성은 원하는 곡선을 정의하는 데 사용됩니다.
이제 발자취를 따라 움직이는 공이 생성될 것입니다!
더 많은 정보를 원한다면 Velocity.js 문서를 확인해보세요.