[javascript] Vanilla JS를 사용하여 파도 효과 구현하기

01 Dec 2023

javascript

이번 포스트에서는 JavaScript를 사용하여 웹 페이지에 파도 효과를 구현하는 방법을 살펴보겠습니다. 이 효과는 애니메이션과 전환을 이용하여 파도처럼 움직이는 모션을 만들어내는 것입니다. Vanilla JS는 순수 JavaScript로 구현된 소프트웨어를 의미하며, 별도의 라이브러리나 프레임워크를 사용하지 않고 JavaScript의 기본 기능만을 이용합니다.

1. HTML 구조 설정하기

먼저, HTML 파일에 원하는 위치에 파도 효과를 구현할 <div> 요소를 추가합니다. 이 요소에는 CSS로 스타일을 지정할 수 있도록 클래스나 ID를 부여해주어야 합니다. 예를 들어, 아래와 같이 <div> 요소를 추가합니다.

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

2. CSS 스타일 지정하기

파도 효과를 구현하기 위해 CSS 파일에 스타일을 지정합니다. 아래는 간단한 예시입니다.

#wave-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, #f0f0f0, #ccc);
  opacity: 0.5;
}

위 스타일은 파도 효과를 구현할 <div> 요소를 전체 화면을 가득 채우도록 설정하고, 배경은 그라디언트로 지정하며, 투명도를 조정하여 효과를 부여합니다.

3. JavaScript로 파도 효과 구현하기

이제 JavaScript 파일을 생성하고 해당 파일에 파도 효과를 구현하는 코드를 작성합니다.

// 파도 효과를 구현할 요소 선택
const waveEffect = document.querySelector("#wave-effect");

// 마우스 이벤트 리스너 추가
document.addEventListener("mousemove", function (event) {
  // 마우스 커서의 위치 값 가져오기
  const mouseX = event.clientX;
  const mouseY = event.clientY;

  // 요소의 위치 조정하기
  waveEffect.style.transform = `translate(${mouseX}px, ${mouseY}px)`;
});

위 JavaScript 코드는 mousemove 이벤트를 감지하여 마우스 커서의 위치 값을 가져와서 요소의 위치를 조정합니다. translate 함수를 이용하여 요소를 이동시키는데, 마우스 커서의 위치 값에 따라 요소의 좌표가 변하도록 설정합니다.

4. 웹 페이지에 스크립트 파일 연결하기

이제 HTML 파일에 작성한 JavaScript 파일을 연결하여 스크립트가 동작하도록 설정합니다. <script> 요소를 사용하여 스크립트 파일을 연결합니다.

<script src="wave-effect.js"></script>

위 코드는 현재 디렉토리에 있는 wave-effect.js 파일을 스크립트로 연결한다는 의미입니다.

5. 결과 확인하기

웹 브라우저에서 HTML 파일을 실행하여 파도 효과가 제대로 동작하는지 확인해보세요. 마우스를 움직일 때마다 파도 효과가 따라다니는 것을 확인할 수 있을 것입니다.

파도 효과는 웹 페이지에 재미있는 요소를 추가할 수 있으며, JavaScript의 간단한 기능만으로도 구현할 수 있습니다. Vanilla JS를 사용하면 별도의 라이브러리나 프레임워크를 의존하지 않고도 원하는 효과를 구현할 수 있으므로, 웹 개발에 유용하게 활용할 수 있습니다.

참고 자료: