무한 롤링 배너, flowBox 만들기

들어가며😃

프로젝트 랜딩페이지를 기획하는데 정적인 이미지만 보여지니 약간 심심한 느낌이 들었다. 그러던 중 흐르는 전광판, 무한 롤링 배너 효과를 쓴 사이트를 보게 되었고, 이거다!🔥 싶어서 우리 프로젝트에도 바로 적용해보았다. 아래는 무한 롤링 배너가 적용된 화면이다.

플로우박스

짜자잔!🚀 오늘은 이 효과를 어떻게 구현했는지 과정에 대해 포스팅하려한다.

1. 컴포넌트 생성

우선 저 롤링 박스의 컴포넌트 뼈대를 생성해줘야한다.

export default function FlowBox() {
  return (
    <FlowContainer>
      {Array(15)
        .fill(1)
        .map((el, index) => (
          <FlowWrapper key={index}>
            <p>SIDE EFFECT</p>
            {/* <Icon /> */}
          </FlowWrapper>
        ))}
    </FlowContainer>
  );
}

Array(15).fill(1) 구문을 살펴보면 길이가 15이고 모든 요소가 1로 채워진 배열을 생성한다. 안에 들어가는 숫자는 몇인지 상관없지만, 나같은 경우에는 15개 정도는 있어야 화면에 짤림현상 없이 보여줄 수 있었다.
그리고 map을 통해 배열을 순환하면서 15번 <FlowWrapper />를 보여주는 것이다. 문구는 해당 프로젝트의 이름으로 넣었고, 대표 아이콘을 추가해주었다. 그럼 뼈대는 끝난 것 이다. 아주 간단쓰!😎

2. CSS 추가

무한 롤링 배너의 핵심인 흐르는 애니메이션을 적용해보자.

export const FlowContainer = styled.div`
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 500;
  color: ${(p) => p.theme.mainBackGround};
  font-style: italic;
  font-size: 25px;
  width: 100%;
  background-color: ${(p) => p.theme.brandColor.primary};
  height: 55px;
`;

우선 가장 부모 컴포넌트의 스타일이다. 여기서 핵심은 white-space: nowrap; 속성이다. 이 속성은 요소의 텍스트가 줄 바꿈되지 않고 한 줄로 표시되도록 해준다. 만약, 이 속성이 없다면

스크린샷 2023-06-22 오전 1 39 35

이런 결과가 나온다,,,그렇기 때문에 필수!

export const FlowWrapper = styled.div`
  display: flex;
  align-items: center;
  animation: textLoop 5s linear infinite;
  padding-right: 15px;
  gap: 15px;

  @keyframes textLoop {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
`;

위는 텍스트와 아이콘을 감싸고 있는 컴포넌트 스타일링 코드이다. 여기서 중요한건 animation: textLoop 5s linear infinite; 속성이다. textLoop는 0%에서 100%까지의 애니메이션 단계를 정의한다. 코드에서는 x좌표가 0에서 -100% 로 되어 있는데, 이는 텍스트를 가로 축(x축)을 따라 왼쪽으로 100% 이동시키는 것을 의미하는 것이다.

그리고 이 애니메이션을 5s(5초동안 지속하고), linear(선형으로), infinite(무한하게) 적용시키는 것이다. 그럼 무한 롤링 배너 제작 완료!

단순하지만 눈을 즐겁게해주는 롤링 배너를 구현해보았다. 어딘가 페이지가 아쉬웠는데 이 배너 하나가 랜딩페이지의 감초 역할을 제대로 하고 있는 것 같아 뿌듯하다.👯‍♀️ 프로젝트가 마무리되기 전에 영감을 얻을 수 있는 페이지를 발견할 수 있어서 다행이였고, 또한 다행이 잘 구현되어서 뿌듯하다. 다음 프로젝트에서는 더 많은 영감을 얻어, 더 많은 시도를 할 수 있기를! 🥹🥹