[javascript] Waves.js를 활용하여 자바스크립트로 구현된 파도 효과를 웹 사이트에 적용하는 방법

01 Dec 2023

javascript

파도 효과는 웹 사이트에 동적이고 생동감 있는 효과를 주는데 사용되는 인기 있는 기술입니다. Waves.js는 자바스크립트 라이브러리로, 웹 요소에 파도 효과를 부여하는 간단한 방법을 제공합니다. 이번 글에서는 Waves.js를 사용하여 웹 사이트에 파도 효과를 적용하는 방법을 알아보겠습니다.

Waves.js 라이브러리 가져오기

먼저, Waves.js 라이브러리를 다운로드하고 웹 사이트의 프로젝트 폴더에 포함해야 합니다. Waves.js는 CDN을 통해 가져오거나, 직접 다운로드하여 사용할 수도 있습니다. 이 예제에서는 CDN을 통해 Waves.js를 가져옵니다.

<!DOCTYPE html>
<html>
<head>
  <title>파도 효과 적용</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/wavesurfer.js/dist/wavesurfer.min.css">
</head>
<body>
  <!-- 웹 사이트 내용 -->
  
  <script src="https://cdn.jsdelivr.net/npm/wavesurfer.js/dist/wavesurfer.min.js"></script>
</body>
</html>

위의 예제에서는 <head> 태그 안에 Waves.js CSS 파일을 포함시킵니다. 그리고 <body> 태그의 맨 아래에 Waves.js 라이브러리 자바스크립트 파일을 포함시킵니다.

Waves.js 파도 효과 적용

이제 Waves.js를 사용하여 파도 효과를 적용해보겠습니다. Waves.js는 DOM 요소에 .waves-effect 클래스를 추가하여 파도 효과를 활성화합니다.

<!DOCTYPE html>
<html>
<head>
  <title>파도 효과 적용</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/wavesurfer.js/dist/wavesurfer.min.css">
</head>
<body>
  <button class="waves-effect">파도 효과 버튼</button>
  
  <script src="https://cdn.jsdelivr.net/npm/wavesurfer.js/dist/wavesurfer.min.js"></script>
</body>
</html>

위의 예제에서는 <button> 요소에 .waves-effect 클래스를 추가하여 파도 효과를 적용합니다.

Waves.js 파라미터 사용하기

Waves.js는 여러 파라미터를 통해 파도 효과의 스타일과 동작을 변경할 수 있습니다. 일부 주요 파라미터는 다음과 같습니다.

wavesurfer-type: 파도 효과의 타입을 지정합니다. "centered"는 버튼의 중앙을 기준으로 효과가 표시되는 원형 파도 효과입니다. "rectangle"은 버튼 전체에 격자 형태로 효과가 표시되는 직사각형 파도 효과입니다.
wavesurfer-duration: 파도 효과가 표시되는 시간을 지정합니다. 값은 밀리초 단위로 입력됩니다.
wavesurfer-delay: 파도 효과가 작동하기 전에 대기하는 시간을 지정합니다. 값은 밀리초 단위로 입력됩니다.

<!DOCTYPE html>
<html>
<head>
  <title>파도 효과 적용</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/wavesurfer.js/dist/wavesurfer.min.css">
  <style>
    .waves-effect {
      width: 200px;
      height: 50px;
      border: 2px solid #000;
      background-color: #fff;
      color: #000;
      font-size: 18px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button class="waves-effect" wavesurfer-type="rectangle" wavesurfer-duration="1000" wavesurfer-delay="500">파도 효과 버튼</button>
  
  <script src="https://cdn.jsdelivr.net/npm/wavesurfer.js/dist/wavesurfer.min.js"></script>
  <script>
    Waves.init();
    Waves.attach('.waves-effect');
  </script>
</body>
</html>

위의 예제에서는 .waves-effect 클래스에 wavesurfer-type, wavesurfer-duration, wavesurfer-delay 속성을 추가하여 파도 효과의 타입, 지속 시간 및 지연 시간을 설정합니다. 이러한 설정을 통해 파도 효과를 원하는 방식으로 사용자 정의할 수 있습니다.

마무리

Waves.js를 사용하면 자바스크립트로 파도 효과를 웹 사이트에 적용할 수 있습니다. 위의 예제를 참고하여 Waves.js를 사용하여 파도 효과를 적용하는 방법을 익힐 수 있습니다. Waves.js를 사용하면 웹 사이트에 생동감을 더할 수 있으며, 사용자와의 상호 작용을 증진시킬 수 있습니다.

참고: Waves.js 공식 GitHub 저장소