[javascript] Velocity.js를 사용하여 요소의 애니메이션 효과를 스크린 크기 변화와 연동하는 방법은?
Velocity.js는 jQuery를 대체하여 요소의 애니메이션을 처리하는데 도움을 주는 빠르고 부드러운 애니메이션 라이브러리입니다. 이를 사용하여 요소의 애니메이션 효과를 스크린 크기의 변화와 연동하여 반응형으로 만들 수 있습니다.
1. Velocity.js 라이브러리 설치
우선, Velocity.js 라이브러리를 HTML 문서에 추가합니다. CDN을 사용하는 경우 아래와 같이 추가할 수 있습니다.
<script src="https://cdn.jsdelivr.net/npm/velocity-animate@2.0.7/velocity.min.js"></script>
2. 애니메이션 효과 준비
애니메이션을 적용할 요소를 준비하고, 기본 애니메이션을 정의합니다.
<div id="animatedElement">애니메이션을 적용할 요소</div>
// 기본 애니메이션 정의
document.getElementById('animatedElement').style.opacity = 0;
document.getElementById('animatedElement').style.transform = 'translateX(-100px)';
3. 반응형 애니메이션 적용
스크린 크기가 변할 때마다 요소에 애니메이션을 적용하는 방법은 window 객체의 resize 이벤트를 활용하는 것입니다.
// 스크린 크기가 변할 때 애니메이션 적용
window.addEventListener('resize', function() {
if (window.innerWidth < 768) {
// 작은 화면일 때 애니메이션
Velocity(document.getElementById('animatedElement'), { opacity: 1, translateX: 0 }, { duration: 1000, easing: 'ease' });
} else {
// 큰 화면일 때 애니메이션
Velocity(document.getElementById('animatedElement'), { opacity: 0, translateX: -100 }, { duration: 1000, easing: 'ease' });
}
});
위의 예제에서는 스크린 크기가 768px 미만일 때와 이상일 때 각각 다른 애니메이션을 적용하도록 설정되어 있습니다.
이렇게 하면 요소에 반응형 애니메이션을 추가할 수 있습니다.
참고 자료
이렇게 Velocity.js를 사용하여 요소의 애니메이션 효과를 스크린 크기 변화와 연동할 수 있습니다.