구현하고 싶은 기능 🤔
우리는 위 웹사이트들처럼 스크롤을 내릴 때 fade-in 효과와 함께 글씨가 아래 또는 옆에서 쓰윽 올라오거나, 이미지가 커지는 등의 애니메이션들을 자주 접해보았을 것이다. 이렇게 스크롤에 따라 애니메이션이 실행되는 것을 Scroll Reveal Animation이라고도 한다.
항상 애니메이션 코드를 복붙으로 사용해보아서, 이제는 제대로 구현해볼 수 있어야 할 때가 아닌가!라고 생각했고, 이를 위해 드디어 css transform, css transitions, css animations의 개념과 사용법을 제대로 공부했다!
구현 결과 ✨
구현결과는 다음과 같다.
애니메이션 로직을 재사용하기 위해 이를 ScrollRevealSlideAnimation 컴포넌트로 만들었고, 애니메이션을 적용하고자 하는 자식 컴포넌트를 ScrollRevealSlideAnimation로 감싸 애니메이션을 적용할 수 있다. (좀 더 정확히 말하면 컴포넌트가 viewport에 들어왔을 때 애니메이션이 실행된다) direction Prop을 통해 애니메이션이 나타나는 방향을 지정할 수도 있게 만들었다.
(* viewport: 브라우저에서 사용자에게 보이는 부분)
// ...
<Wrapper style={{ backgroundColor: GREY[400] }}>
<ScrollRevealSlideAnimation direction="left">
<P level={3} fontWeight="bold">
Testing Animation...
<br />
SlideDir: left
</P>
</ScrollRevealSlideAnimation>
</Wrapper>
<Wrapper style={{ backgroundColor: GREY[600] }}>
<ScrollRevealSlideAnimation direction="right">
<P level={3} fontWeight="bold">
Testing Animation...
<br />
SlideDir: right
</P>
</ScrollRevealSlideAnimation>
</Wrapper>
// ...구현과정
1️⃣ css 공부: css transition, css transform, css animation
2️⃣ VanillaJS 코드로 애니메이션 작동이해하기
3️⃣ React 코드로 구현해보기
4️⃣ 컴포넌트로 만들어 재사용 가능하게 만들기
1️⃣ CSS 공부하기
transition vs transform vs animation??
나는 이 3개가 늘 헷갈리고 어렵게만 느껴졌다 🤷♀️
그래서 css의 수학의 정석과도 같은 w3schools를 정독했다!
CSS transition
transition은 변환을 의미하고, element에 대해 이동하기(translate), 회전하기(rotate), 크기 조정하기(scale), 기울이기(skew)를 할 수 있다.
(이는 transform과 animation에서 원하는 애니메이션을 구현하기 위한 기초지식이라 할 수 있다)
사용방법은 함수와 같다. 인자로 x,y축에 대한 값 또는 각도를 넣는다.
ex)
div.test1 {
transform: scale(2, 0.5);
}
// test1 div를 x축으로는 2배, y축으로는 1/2배로 크기조정
div.test2 {
transform: translate(50px, 100px);
}
// test2 div를 x축으로 50px, y축으로 100px 이동translate, scale, skew는 translateX(), translateY() 등의 함수로 한가지 축에 대해서만 변환을 해줄 수도 있다.
rotate의 경우는 각도를 나타내는 숫자 뒤에 deg라는 단위를 적어준다.
div {
transform: rotate(20deg);
}
// 시계방향으로 20도 회전(z축도 인자로 주어지면 3차원에서 이동, 크기조정, 회전 등을 한다.)
transform을 사용하면 요소의 속성값의 변화가 즉각 나타나는데, 트랜지션과 애니메이션을 사용하면 변화가 일정시간에 걸쳐 나타나게 할 수 있다.
CSS transition
transition은 전환이다. transition을 사용하면 주어진 기간 동안 element의 너비, 색깔 등의 속성 값을 매끄럽게 변경할 수 있다. 이때 transform을 같이 적용할 수도 있다. (예제)
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s linear 1s;
}
div:hover {
width: 300px;
}transition은 보통 위와 같이 사용된다.
빨간 사각형 영역에 커서를 올리면 1초 후 2초간 width가 100px -> 300px로 일정하게 증가하고, 커서를 치우면 반대로 1초 후 2초간 width가 300px -> 100px로 일정하게 감소한다.
transition은 hover나 onClick과 같은 이벤트 트리거에 의해 동작한다.
transition 속성
transition-delay: transition 시작 전 지연될 초 (단위: s)transition-duration: 요소가 변화하는 (transition이 동작하는) 기간 (단위: s)transition-property: width, height, opacity, background-color등의 변경될 css 속성transition-timing-function: 전환 속도 곡선으로 ease, linear, ease-in, ease-out 등이 있다. (CSS transition-timing-function Property종류)
(추가로, 베지어 곡선 등을 통해 퀄리티 높은 애니메이션을 구현할 수도 있다. 참고자료)
CSS animation
애니메이션을 사용하면 트랜지션보다 화려한 css를 구현할 수 있다.
트랜지션은 시작하기 위해 이벤트가 필요하지만 애니메이션은 시작, 정지, 반복까지 제어할 수 있다.
애니메이션을 위해 사용되는 개념은 @keyframes라는 것이다.
@keyframes example {
from {background-color: red; width: 100px;}
to {background-color: yellow; width: 200px;}
}이렇게 from과 to로 애니메이션의 시작과 끝 상태를 지정해주면 animation이 동작할 때 변화가 매끄럽게 적용된다. 이때 example은 @keyframes의 이름이다.
@keyframes [키프레임 이름] {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}퍼센트로 해당지점의 상태를 나타내어 2번 이상의 상태 변화도 가능하게 한다.
transition과 같이 animation-delay, animation-duration, animation-timing-function을 지정해 줄 수 있다.
이때, animation-duration의 default값은 0s이고 지정해주지 않으면 애니메이션이 동작하지 않으므로 주의해야한다!!
animation-name: 키프레임 이름을 적어준다 (필수)animation-iteration-count: 애니메이션 반복 횟수, infinite를 적어주면 무한반복한다animation-direction: 애니메이션 방향으로 normal, reverse, alternate, alternate-reverse가 있다. (normal: 정방향, reverse: 역방향, alternate: 정방향 -> 역방향 -> 정방향 ..., alternate-reverse: 역방향 -> 정방향 -> 역방향... , alternate는 반복이 2이상일때부터 확인할 수 있다.)animation-fill-mode: 애니메이션이 재생되지 않을 때 (애니메이션 시작 전(대기), 끝난 후(종료)) element의 스타일을 지정한다. (none: 애니메이션 실행 전후 요소에 스타일 반영 x(애니메이션 종료 후 속성 값을 되돌림), forwards: 마지막 키 프레임에서 설정한 스타일 값을 유지, backwards: 첫 번째 키 프레임 (애니메이션 방향에 따라 다름)에 의해 설정된 스타일 값을 가져오고 애니메이션 지연 기간 동안 이를 유지, both: forwards, backwards를 모두 따른다)
(이를 이해한 후에는 https://www.react-reveal.com/과 같은 라이브러리를 사용해도 좋다)
참고자료
