[javascript] 파도 애니메이션을 자바스크립트로 만들어 다른 애니메이션과 조합하는 예시 소개

01 Dec 2023

javascript

파도 애니메이션은 웹 디자인에 많이 사용되는 효과 중 하나입니다. 이 효과를 자바스크립트와 조합하여 동적인 웹 페이지를 만들 수 있습니다. 이번 글에서는 자바스크립트로 파도 애니메이션을 만들고, 다른 애니메이션과 조합하는 예시를 소개하겠습니다.

파도 애니메이션 구현하기

파도 애니메이션을 구현하기 위해서는 HTML 요소를 생성하고, 자바스크립트로 요소의 스타일을 변경해야 합니다. 다음은 파도 애니메이션을 구현하는 예시 코드입니다.

<div id="wave"></div>

<style>
  #wave {
    width: 300px;
    height: 100px;
    background-color: #3498db;
    position: relative;
    overflow: hidden;
  }
</style>

<script>
  const wave = document.getElementById('wave');
  let position = 0;
  
  function animateWave() {
    position += 5;
    wave.style.backgroundPosition = `${position}px 0`;
    requestAnimationFrame(animateWave);
  }
  
  animateWave();
</script>

위 코드는 wave라는 ID를 가진 <div> 요소를 생성하고, 해당 요소의 스타일을 설정합니다. 스타일은 파도의 색상, 크기, 위치 등을 결정합니다. 자바스크립트에서는 animateWave라는 함수를 정의하여 파도 애니메이션을 구현합니다. 요소의 backgroundPosition을 변경하여 파도가 움직이는 효과를 줄 수 있습니다.

애니메이션과 조합하기

파도 애니메이션은 다른 애니메이션과 조합하여 더 멋진 효과를 만들 수 있습니다. 예를 들어, 마우스 호버 효과와 함께 파도 애니메이션을 사용할 수 있습니다. 다음은 이러한 조합을 구현하는 예시 코드입니다.

<div id="wave"></div>

<style>
  #wave {
    width: 300px;
    height: 100px;
    background-color: #3498db;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s;
  }
  
  #wave:hover {
    background-color: #e74c3c;
  }
</style>

<script>
  const wave = document.getElementById('wave');
  let position = 0;
  
  function animateWave() {
    position += 5;
    wave.style.backgroundPosition = `${position}px 0`;
    requestAnimationFrame(animateWave);
  }
  
  animateWave();
</script>

위 코드에서는 wave 요소에 호버 효과를 추가하였습니다. 마우스를 올리면 파도의 색상이 변경되는 효과를 볼 수 있습니다. 파도 애니메이션과 호버 효과를 조합하는 것은 스타일과 이벤트 핸들링을 통해 가능합니다.

결론

자바스크립트를 사용하여 파도 애니메이션을 구현하고, 다른 애니메이션과 조합하는 방법을 알아보았습니다. 이러한 효과들을 사용하여 웹 페이지에 동적인 요소를 추가할 수 있습니다. 파도 애니메이션은 사용자에게 시각적으로 흥미로운 경험을 제공하여 웹 페이지의 인상을 높일 수 있습니다.