[React] 움직이는 물결 애니메이션 만들기

시작하기 앞서...

React 에서 CSS 를 사용하여 움직이는 물결 애니메이션을 만들 것이다.

 

컴포넌트 만들기

물결 3개를 만들기 위해 3개의 요소를 만들고,
wave 라는 class 를 공통으로 가지면서 서로 다른 스타일링을 위해 각각 -one, -two, -three 를 가진다.

import '../App.css'

function WaveComponent() {
  return (
    <>
      <div class="wave -one"></div>
      <div class="wave -two"></div>
      <div class="wave -three"></div>
    </>
  );
}

export default WaveComponent;

 

CSS 설정

물결 애니메이션을 만드는 원리는 아래처럼 생긴 요소를 애니메이션을 적용시키고 일부만 화면에 보여주어 물결이 움직이는 것 처럼 보여준다.

 

wave 스타일

요소들이 겹쳐 있기 때문에 postion 을 absolute 로 적용하고, top 과 left 를 사용하여 위치를 설정한다.

요소의 높이와 너비는 vw 를 사용하여 현재 화면의 2배로 설정한다.
margin-left 는 너비의 -절반으로 설정하여 가운데에 배치시키고, margin-top 을 원하는 만큼 설정한다.

border-radius 로 모서리를 둥글게 한다.

.wave {
  position: absolute;
  top: 20%;
  left: 50%;
  width: 200vw;
  height: 200vw;
  margin-left: -100vw;
  margin-top: -196vw;
  border-radius: 40%;
}

 

정상적으로 만들어졌는지 확인하기 위해 잠시 backgroud 를 파란색으로 설정하고 프로젝트를 실행시키면, 물결의 형태가 생긴 것을 볼 수 있다.

 

wave 애니메이션

물결 애니메이션은 요소가 360도 일정한 속도로 계속 반복되어 생성된다.

그래서 0도에서 360도까지 회전하는 애니메이션을 생성한다.

@keyframes waveAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

 

첫 번째 물결

먼저 첫 번째 물결에 애니메이션을 10초 동안 일정한 속도(linear)로 계속 반복(infinite) 시킨다.
그리고 투명도를 50% 로 설정하고 원하는 색상을 적용시킨다.

.wave.-one {
  animation: waveAnimation 10000ms infinite linear;
  opacity: 0.5;
  background: #0af;
}

 

 

두 번째, 세 번째 물결

위와 똑같이 애니메이션을 적용시키고, 투명도와 색상을 설정한다.

.wave.-two {
  animation: waveAnimation 13500ms infinite linear;
  opacity: 0.1;
  background: yellow;
}

.wave.-three {
  animation: waveAnimation 11000ms infinite linear;
  opacity: 0.1;
  background: #e8a;
}

 

가로 스크롤 없애기

해당 컴포넌트가 너무 크기 때문에 화면 밖으로 나가 가로 스크롤이 생긴다.
이를 없애주기 위해 overflow-x: hidden; 를 추가한다.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

 

이제 프로젝트를 실행하면 아래와 같은 결과가 나오게 된다.
이를 활용하여 원하는 위치, 속도, 색상, 투명도 등을 설정할 수 있다.

참고

https://codepen.io/rstacruz/pen/oxJqNv

Waves