이번에는 Clipboard.js를 사용하여 웹페이지에서 특정 요소를 복사한 후 애니메이션 효과를 추가하는 방법에 대해 알아보겠습니다. Clipboard.js는 클립보드에 내용을 복사하고 붙여넣기하는 JavaScript 라이브러리로, 사용자가 웹페이지의 특정 요소를 클릭하면 해당 요소의 내용을 클립보드에 복사할 수 있습니다.

필요한 라이브러리

이 예제에서는 Clipboard.js를 사용합니다. Clipboard.js는 CDN을 통해 불러오거나, npm을 통해 설치하여 사용할 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.min.js"></script>

HTML 구조

다음은 예제에서 사용할 HTML 구조입니다. 복사할 요소를 선택할 버튼과 애니메이션 효과를 추가할 요소를 포함하고 있습니다.

<button data-clipboard-target="#copyText">Copy Text</button>
<p id="copyText">Hello, World!</p>
<div id="animationTarget"></div>

JavaScript 코드

Clipboard.js를 사용하기 위해 다음과 같은 JavaScript 코드를 작성해야합니다. 코드는 버튼을 클릭하면 해당 요소의 내용을 클립보드에 복사하고, 애니메이션을 통해 사용자에게 피드백을 제공합니다.

var clipboard = new ClipboardJS('[data-clipboard-target]');

clipboard.on('success', function(e) {
  console.log(e);
  var animationTarget = document.getElementById('animationTarget');
  animationTarget.innerHTML = 'Copied!';
  animationTarget.classList.add('animate');

  setTimeout(function() {
    animationTarget.innerHTML = '';
    animationTarget.classList.remove('animate');
  }, 2000);
});

clipboard.on('error', function(e) {
  console.log(e);
});

위 코드에서는 ClipboardJS 생성자를 사용하여 해당 요소를 복사하는 클립보드 인스턴스를 생성합니다. ‘success’ 이벤트는 복사가 성공적으로 완료되면 발생하며, ‘error’ 이벤트는 복사 실패 시 처리합니다. 성공 이벤트 핸들러에서는 애니메이션을 활성화하고 2초 후에 애니메이션을 해제합니다.

CSS 스타일

적절한 애니메이션 효과를 적용하기 위해 CSS 스타일을 추가해야합니다.

#animationTarget {
  transition: all 0.3s ease-in-out;
}

.animate {
  color: blue;
  transform: scale(1.1);
}

위 스타일은 #animationTarget 요소에 0.3초의 애니메이션 전환 효과를 적용하며, 애니메이션을 적용할 때 크기를 1.1배로 확대하고 글자색을 파란색으로 변경합니다.

결론

위의 예제를 따라하면, 웹페이지에서 특정 요소를 클립보드에 복사한 후 애니메이션 효과를 추가할 수 있습니다. Clipboard.js와 애니메이션 효과를 결합하여 사용자에게 더 좋은 사용자 경험을 제공할 수 있습니다.

더 자세한 사항은 Clipboard.js 공식 문서를 참조하십시오.