[javascript] ScrollReveal을 이용한 요소 드래그 효과 구현 방법
ScrollReveal은 웹 사이트에서 스크롤 시 요소들이 부드럽게 나타나는 효과를 주는 라이브러리입니다. 이번에는 ScrollReveal을 이용하여 요소의 드래그 효과를 구현하는 방법에 대해 알아보겠습니다.
ScrollReveal 라이브러리 설치하기
먼저, ScrollReveal 라이브러리를 설치해야 합니다. npm을 이용하여 설치할 수 있습니다.
npm install scrollreveal
HTML 요소 준비하기
드래그 효과를 적용하려는 HTML 요소를 준비합니다. 효과를 주려는 요소에 data-sr 속성을 추가하고, 드래그 효과를 위한 클래스 draggable를 적용합니다.
<div class="draggable" data-sr>
내용...
</div>
ScrollReveal 설정하기
ScrollReveal을 사용하기 위해 JavaScript 파일에 다음과 같이 코드를 작성합니다.
import ScrollReveal from 'scrollreveal';
// ScrollReveal 초기화
ScrollReveal().reveal('.draggable', {
origin: 'right',
distance: '100px',
duration: 1000,
easing: 'ease',
});
// 드래그 효과를 주는 함수
function enableDraggable() {
const draggables = document.querySelectorAll('.draggable');
draggables.forEach((draggable) => {
draggable.addEventListener('mousedown', (e) => {
const startX = e.clientX;
const startY = e.clientY;
function onMouseMove(event) {
const dx = event.clientX - startX;
const dy = event.clientY - startY;
draggable.style.transform = `translate(${dx}px, ${dy}px)`;
}
function onMouseUp() {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
}
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
});
});
}
// 페이지 로드 시 드래그 효과 활성화
window.onload = enableDraggable;
스크롤 시드 요소 효과 확인하기
ScrollReveal을 초기화하고 reveal 메소드를 이용하여 요소들에 효과를 설정합니다. 위의 예제에서는 요소의 움직임이 오른쪽에서 시작되어 100px만큼 이동한 후 1초 동안 나타나는 효과를 부여했습니다.
또한, enableDraggable 함수를 통해 드래그 효과를 주도록 설정하였습니다. 해당 함수에서는 mousedown 이벤트를 감지하여 요소를 드래그할 수 있도록 구현하였습니다.
결론
이렇게 ScrollReveal을 이용하여 요소의 드래그 효과를 구현할 수 있습니다. ScrollReveal을 활용하면 웹 사이트에 다양한 효과를 부여할 수 있으니, 필요한 경우에 활용해보세요.