[javascript] 파도 효과를 이용한 자바스크립트로 만든 전환 효과 예시 소개

01 Dec 2023

javascript

이번에는 자바스크립트를 사용하여 파도 효과를 구현해보는 전환 효과 예시를 소개하고자 합니다.

미리보기

Wave Effect

코드 예시

아래는 파도 효과를 구현하기 위한 자바스크립트 코드의 예시입니다.

// HTML 요소를 가져옵니다.
const element = document.querySelector('.wave-element');

// 파도 효과 함수를 정의합니다.
const applyWaveEffect = (e) => {
  // 마우스 이벤트의 좌표를 가져옵니다.
  const x = e.clientX;
  const y = e.clientY;

  // 요소의 가로 길이와 세로 길이를 가져옵니다.
  const width = element.offsetWidth;
  const height = element.offsetHeight;

  // 요소의 중심을 기준으로 마우스 좌표의 거리를 계산합니다.
  const horizontalDistance = Math.abs(x - width / 2);
  const verticalDistance = Math.abs(y - height / 2);

  // 요소의 변화를 계산하여 스타일을 적용합니다.
  element.style.transform = `translate(${horizontalDistance}px, ${verticalDistance}px)`;
};

// 마우스 이벤트를 리스닝합니다.
element.addEventListener('mousemove', applyWaveEffect);

위의 코드 예시는 wave-element 클래스를 가진 HTML 요소를 마우스 이벤트에 따라 파도 효과를 적용하는 기능을 구현한 것입니다.

사용법

HTML 파일에 위의 코드 예시를 <script> 태그로 추가합니다.
파도 효과를 적용하고자 하는 요소에 wave-element 클래스를 추가합니다.
웹 페이지를 미리보기하여 마우스를 요소 위로 움직였을 때 파도 효과가 적용되는지 확인합니다.

결론

위의 예시를 참고하여 자바스크립트를 이용한 파도 효과 전환 효과를 구현할 수 있습니다. 이를 응용하여 웹 페이지의 다양한 요소에 흥미로운 전환 효과를 만들어 보세요.

참고 자료

CSS 파도 효과 구현 방법