[React/CSS] 옆으로 흐르는 텍스트 Animation Bar 만들기

---

예시

위처럼 이번에 참여한 프로젝트에서 만든 애니메이션바에 대해 포스팅을 해보겠습니다.

애니메이션바는 keyframe을 이용해서 만듭니다!

 

여기서 keyframe이란?

CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 하는 속성

 

0~100% 형태

@keyframes fadeIn {
 0% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}

from-to 형태

@keyframes fadeIn {
 from {
  opacity: 0;
 }
 to {
  opacity: 1;
 }
}

 

keyframe을 사용하기 위해서는 다음과 같이 3가지가 필요합니다.

• animation-name : 사용자가 직접 지정한 이름
• stage : from - to 로 0~100% 의 구간
• CSS 스타일 : 각 스테이지(구간)에 적용시킬 스타일

 

하지만 전 리액트 styled-components 형식으로 코드를 작성해보려고 합니다.

리액트에서는 애니메이션을 props 형태로 사용합니다.

위 코드를 리액트 방식으로 바꾸어 보겠습니다.

 

const fadeIn = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`

const Textdiv = styled.div`
	animation: ${fadeIn} 2s 1s linear infinite;
`

animation의 속성으로 ${} 형태로 들어간 것을 확인할 수 있습니다.

 

다음은 맨 위 예시 영상 animation bar  코드입니다.

 

style.js 파일

import styled, {keyframes} from "styled-components";
import colors from '../../styles/colors';

const flowing = keyframes`
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
`

export const AnimationLayout = styled.div`
    display: flex;
    flex-direction: row;
    background-color: ${colors.white_100};
`

export const FlowBox = styled.div`
    position: relative;
    width: 100%;
    height: 46px;
    /* overflow: hidden; */
`

export const FlowText = styled.div`
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    white-space: nowrap;
`

export const TextDiv = styled.div`
    font-size: 20.003px;
    animation: ${flowing} 8s linear infinite;
    span{
        display:inline-block;
        font-family: 'Gotham';
        font-weight:600;
        padding:0 3px;
    }
`

export const ITStyle = styled.div`
    color: ${colors.pointColor_1};
    display: inline-block;
    padding:0 3px;
`

export const ITStyle2 = styled.div`
    color: ${colors.pointColor_2};
    padding-left: 3px;
    padding-right: 0px;
    display: inline-block;
`

export const TerviewStyle = styled.div`
    padding-left: 0px;
    padding-right: 3px;
    display: inline-block;
`

export const OneText = styled.div`
    padding-right: 26.66px;
`

index.js 파일

import React from 'react'
import { AnimationLayout, FlowBox, FlowText, TextDiv, ITStyle, ITStyle2, TerviewStyle, OneText } from './styles';

function AnimationBar() {
  return (
      <>
      <AnimationLayout>
        <FlowBox>
            <FlowText>
                <TextDiv>
                    <OneText>
                        <span>DON’T AFRAID</span>
                        <ITStyle>IT</ITStyle>
                        <span>LET’S DO</span>
                        <ITStyle2>IT</ITStyle2>
                        <TerviewStyle>ERVIEW</TerviewStyle>
                    </OneText>
                </TextDiv>
		    ∙
                    ∙
                    ∙
                    # 적당하게 맞춰서 문구를 늘린다
            </FlowText>
        </FlowBox>
      </AnimationLayout>
      </>
  )
}

export default AnimationBar