[javascript] Clipboard.js를 사용하여 웹페이지에서 특정 요소 복사 후 애니메이션 적용하기

30 Nov 2023

javascript

이번 글에서는 Clipboard.js 라이브러리를 사용하여 웹페이지에서 특정 요소를 복사한 후, 애니메이션을 적용하는 방법을 알아보겠습니다.

Clipboard.js란?

Clipboard.js는 클립보드에 텍스트나 HTML을 복사할 수 있도록 도와주는 자바스크립트 라이브러리입니다. 이 라이브러리는 사용자가 손쉽게 복사 기능을 구현할 수 있도록 도와줍니다.

사용 방법

먼저, Clipboard.js를 웹페이지에 추가합니다. <head> 태그 내부에 아래의 코드를 추가하여 Clipboard.js를 로드합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

복사할 요소를 마크업합니다. 예를 들어, <div id="copyElement">로 복사할 특정 요소를 마크업합니다.
자바스크립트 코드를 추가합니다. 다음은 Clipboard.js를 사용하여 특정 요소를 복사하고 애니메이션을 적용하는 코드입니다.

const clipboard = new ClipboardJS('#copyElement');

clipboard.on('success', function(e) {
  // 복사가 성공적으로 수행됐을 때 실행되는 함수
  e.clearSelection(); // 클립보드 선택 영역을 지우기
  // 애니메이션 적용 코드 추가
});

clipboard.on('error', function(e) {
  // 복사가 실패했을 때 실행되는 함수
});

애니메이션을 적용합니다. Clipboard.js의 성공 이벤트 핸들러 내부에 애니메이션 적용 코드를 추가합니다. 예를 들어, jQuery를 사용하여 애니메이션 효과를 줄 수 있습니다.

$('#copyElement').animate({ opacity: 0 }, 500, function() {
  $(this).animate({ opacity: 1 }, 500);
});

위 코드는 복사 성공 시, #copyElement 요소의 투명도를 0으로 줄이고 다시 1로 원래대로 돌아오는 애니메이션을 적용하는 예제입니다.

동작 확인

위의 코드를 적용한 후 웹페이지를 실행하고, #copyElement를 클릭하여 복사를 수행해보세요. 복사가 성공했을 때 애니메이션 효과가 적용되는 것을 확인할 수 있습니다.

결론

Clipboard.js를 사용하여 웹페이지에서 특정 요소를 복사한 후 애니메이션을 적용하는 방법을 알아보았습니다. Clipboard.js는 사용이 간편하고 텍스트나 HTML 복사에 유용한 기능을 제공해줍니다. 애니메이션 적용 코드를 추가하여 사용자에게 시각적인 피드백을 줄 수 있습니다.