파도 효과는 웹 디자인에서 많이 사용되는 시각적 효과 중 하나입니다. 이 효과를 자바스크립트를 이용하여 신선한 UI/UX 디자인에 활용할 수 있는 몇 가지 아이디어를 소개하겠습니다.

1. 파도가 퍼지는 버튼 효과

파도 효과를 이용하여 버튼을 디자인하는 것은 매우 인기 있는 방식 중 하나입니다. 마우스를 버튼 위로 올리면 파도가 퍼져서 버튼의 외곽으로 확장되는 효과를 주는 것이 특징입니다. 이는 버튼을 클릭할 때 시각적인 피드백을 제공하여 사용자 경험을 향상시키는 역할을 합니다. 자바스크립트의 이벤트 처리를 통해 이 효과를 구현할 수 있습니다.

const button = document.querySelector('.wave-button');

button.addEventListener('mouseenter', function(event) {
  const rect = button.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;

  const wave = document.createElement('span');
  wave.classList.add('wave');
  wave.style.left = x + 'px';
  wave.style.top = y + 'px';

  button.appendChild(wave);

  setTimeout(function() {
    wave.remove();
  }, 1000);
});

위 코드는 버튼에 마우스를 올렸을 때 발생하는 ‘mouseenter’ 이벤트를 감지하여 버튼 위치 상대 좌표를 계산한 뒤, 해당 위치에 파도 효과를 가진 요소를 동적으로 생성합니다. 1초 후에 파도 요소를 제거하여 파도 효과를 완성합니다.

2. 파도가 흐르는 배경 효과

파도 효과를 배경에 적용하면 웹 페이지의 전체적인 느낌을 신선하게 만들 수 있습니다. 일정한 간격으로 파도가 흐르거나, 마우스 커서의 위치에 따라 파도를 움직이는 효과를 줄 수 있습니다. 이를 위해서는 자바스크립트를 통해 움직임을 제어하는 애니메이션을 구현해야 합니다.

const waves = document.querySelectorAll('.wave-background');

waves.forEach(function(wave, index) {
  wave.style.animationDelay = index * 0.2 + 's';
});

위 코드는 .wave-background 클래스를 가진 모든 요소를 선택한 뒤, 각 요소에 대해 애니메이션 지연 시간을 설정하여 파도가 일정한 간격으로 흐르는 효과를 만듭니다. 각 요소에 적용되는 애니메이션 지연 시간은 index * 0.2를 통해 순서대로 증가하도록 설정하였습니다.

3. 파도를 이용한 텍스트 애니메이션

파도 효과를 이용하여 텍스트 애니메이션을 구현할 수도 있습니다. 텍스트의 각 글자에 부드러운 파도 효과를 주면서 글자가 나타나거나 사라지는 애니메이션을 구현할 수 있습니다. 이를 위해서는 글자 별로 파도 효과를 적용하는 자바스크립트 코드와 CSS 애니메이션을 함께 사용해야 합니다.

const text = document.querySelector('.wave-text');
const letters = text.textContent.split('');

text.innerHTML = '';

letters.forEach(function(letter) {
  const span = document.createElement('span');
  span.classList.add('wave-letter');
  span.textContent = letter;
  text.appendChild(span);
});

위 코드는 .wave-text 클래스를 가진 요소에서 텍스트를 가져와 각 글자별로 <span> 요소를 생성한 뒤, 각 글자에 .wave-letter 클래스를 추가합니다. 이렇게 생성된 요소들은 CSS 애니메이션을 이용하여 파도 효과를 적용할 수 있습니다.

결론

자바스크립트를 이용한 파도 효과를 활용하여 신선한 UI/UX 디자인을 구현할 수 있습니다. 위에서 소개한 아이디어들을 적용하여 웹 페이지에 독창적이고 매력적인 디자인을 구현해보세요. 추가적으로 이 링크에서 파도 효과를 구현하는 라이브러리를 참고할 수도 있습니다.

참고문헌:

• 링크 1
• 링크 2