[javascript] Waves.js를 활용하여 자바스크립트로 파도 애니메이션을 더욱 부드럽게 만드는 기술 팁 소개

01 Dec 2023

javascript

파도 애니메이션은 웹 개발에서 많이 사용되는 효과 중 하나입니다. 그러나 기본적으로 제공되는 애니메이션은 일반적으로 부드럽지 않을 수 있습니다. 이러한 경우에 Waves.js를 사용하여 파도 애니메이션을 더욱 부드럽고 자연스럽게 만들 수 있습니다.

Waves.js란?

Waves.js는 자바스크립트 라이브러리로, 요소에 파도 효과를 부여할 수 있습니다. 요소에 마우스를 클릭하거나 터치할 때 파도 효과를 보여줄 수 있으며, 이를 활용하여 파도 애니메이션을 구현할 수 있습니다.

Waves.js 설치하기

Waves.js를 사용하기 위해서는 먼저 이를 설치해야 합니다. Waves.js는 CDN으로 제공되므로, 다음과 같이 HTML 파일의 <head> 태그 안에 스크립트 태그를 추가하여 Waves.js를 불러올 수 있습니다.

<head>
  <script src="https://unpkg.com/waves.js"></script>
</head>

또는 npm을 통해 Waves.js를 설치할 수도 있습니다.

npm install waves.js

Waves.js 사용하기

Waves.js를 설치하고 나면, 파도 애니메이션을 구현할 요소에 Waves 클래스를 추가하면 됩니다. 이를 위해 다음과 같은 코드를 사용할 수 있습니다.

<button class="waves-effect">Click me</button>

위의 예시에서, 버튼에 waves-effect 클래스를 추가했습니다. 이제 Waves.js에서 이 클래스를 인식하여 파도 애니메이션을 적용할 것입니다.

스크립트 파일을 작성하여 Waves.js를 초기화하고 사용할 수 있습니다. 이 때, Waves.init() 함수를 사용하여 Waves 클래스를 인식할 수 있도록 설정합니다.

<script>
  Waves.init();
</script>

Waves.js 옵션 설정하기

Waves.js를 사용하면 다양한 옵션을 설정할 수 있습니다. 일반적으로 사용되는 옵션은 다음과 같습니다.

duration: 파도 애니메이션의 지속 시간을 설정합니다.
delay: 클릭 또는 터치 이후 파도 애니메이션을 시작하기 전에 대기할 시간을 설정합니다.
easing: 파도 애니메이션의 이징 기능을 설정합니다.

옵션을 설정하기 위해서는 Waves.attach() 함수를 사용해야 합니다. 예를 들어, 다음과 같은 코드를 사용하여 옵션을 설정할 수 있습니다.

<script>
  Waves.attach('.waves-effect', {
    duration: 500,
    delay: 200,
    easing: 'ease-out'
  });
</script>

위의 코드에서는 .waves-effect 클래스를 가진 요소에 파도 애니메이션을 적용하고, 애니메이션의 지속 시간을 500ms로, 대기 시간을 200ms로 설정하였습니다.

추가적인 설정 및 사용 예시

커스텀 클래스 추가하기

파도 효과를 적용할 요소에 추가적인 클래스를 추가하여 스타일을 커스터마이징할 수 있습니다. 예를 들어, 다음과 같은 코드를 사용하여 파도 애니메이션에 추가적인 스타일을 적용할 수 있습니다.

<button class="waves-effect custom-btn">Click me</button>

위의 코드에서 .custom-btn 클래스를 추가하였습니다. 이제 Waves.js는 해당 클래스를 인식하여 파도 애니메이션을 적용할 것입니다.

터치 이벤트에만 파도 애니메이션 적용하기

원하는 경우 터치 이벤트에만 파도 애니메이션을 적용할 수 있습니다. 이를 위해서는 다음과 같이 코드를 수정할 수 있습니다.

<script>
  Waves.attach('.waves-effect', {
    duration: 500,
    delay: 200,
    easing: 'ease-out',
    // 터치 이벤트에만 적용
    wait : function(e, element){
      return ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
    }
  });
</script>

wait 옵션을 사용하여 터치 이벤트에만 파도 애니메이션을 적용하도록 설정합니다.

결론

Waves.js를 사용하면 자바스크립트로 파도 애니메이션을 더욱 부드럽고 자연스럽게 구현할 수 있습니다. Waves.js의 다양한 옵션을 활용하여 원하는 파도 애니메이션 효과를 적용할 수 있습니다. 웹 개발에서 파도 애니메이션을 사용하고자 하는 경우, Waves.js를 고려해보세요.