[javascript] 파도 애니메이션을 사용한 자바스크립트 화면 전환 효과 구현하기

01 Dec 2023

javascript

이번 포스트에서는 자바스크립트를 사용하여 파도 애니메이션을 활용한 화면 전환 효과를 구현하는 방법에 대해 알아보겠습니다.

준비물

HTML 파일
CSS 파일
자바스크립트 파일

HTML 구조

먼저, 다음과 같이 기본적인 HTML 구조를 작성해주세요.

<!DOCTYPE html>
<html>
<head>
  <title>파도 애니메이션 예제</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <div class="container">
    <div class="wave"></div>
    <div id="content">
      <!-- 화면 전환 내용 -->
    </div>
  </div>
</body>
</html>

CSS 스타일 설정

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #3498db;
  animation: wave 2s infinite linear;
}

@keyframes wave {
  0% { transform: translateX(0); }
  50% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

위의 CSS 코드는 .container 요소에 파도 애니메이션을 구현하기 위한 스타일을 설정한 것입니다.

자바스크립트 코드 작성

이제 자바스크립트 파일에 실제로 화면 전환을 구현하는 로직을 작성해보겠습니다.

const content = document.getElementById('content');
const wave = document.querySelector('.wave');

setInterval(changeContent, 5000);

function changeContent() {
  content.classList.toggle('active');
  wave.classList.toggle('active');
}

위의 자바스크립트 코드는 content 요소와 wave 요소를 가져와서 일정 시간마다 화면을 전환하는 로직을 구현한 것입니다.

결과 확인하기

이제 작성한 코드가 실행되는지 확인해봅시다. HTML 파일을 웹 브라우저에서 열어보면 파도 애니메이션이 적용된 화면 전환 효과를 확인할 수 있습니다.

참고 자료

CSS Animation