[TIL] 텍스트 슬라이드업 캐러셀 구현하기

텍스트 슬라이드업 캐러셀

Next.js + TypeScript + styled-components 환경에서 위와 같은 텍스트 슬라이드업 캐러셀을 구현해보자!

 

[components/Home/HomeAnimation.tsx]

import { useState, useEffect, useRef } from 'react';
import {
  ...
  CarouselContainer,
  CarouselRotator,
  CarouselRotatorItem,
} from './HomeAnimation.styled';

export default function HomeAnimation() {
  const [count, setCount] = useState(0);
  const intervalRef: { current: NodeJS.Timeout | null } = useRef(null);

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setCount((prev) => prev + 1);
    }, 2500);
    return () => clearInterval(intervalRef.current as NodeJS.Timeout);
  }, []);

  return (
    <>
    ...
        <CarouselContainer>
          <span>IT Community</span>&nbsp;
          <span>for</span>&nbsp;&nbsp;
          <CarouselRotator>
            {count % 3 === 0 && <CarouselRotatorItem>Hustler</CarouselRotatorItem>}
            {count % 3 === 1 && <CarouselRotatorItem>Hacker</CarouselRotatorItem>}
            {count % 3 === 2 && <CarouselRotatorItem>Hipster</CarouselRotatorItem>}
          </CarouselRotator>
        </CarouselContainer>
    ...
    </>
  );
}

setInterval로 일정 시간마다 count 값을 증가시켜 컴포넌트를 교체하는데, useRef의 current 속성에 값을 저장하고 useEffect로 초기화해 랜더링마다 값이 중첩되지 않도록 해줘야 한다! (타입 지정은 구글링으로 해결)

 

[components/Home/HomeAnimation.styled.tsx]

import styled, { keyframes } from 'styled-components';
...

export const CarouselContainer = styled.div`
  display: inline-flex;
  align-items: center;
  ...
`;

const slideUp = keyframes`
  0% {
    transform: translateY(100%);
  } 
  100% {
    transform: translateY(0);
  }
`;

export const CarouselRotator = styled.div`
  border-bottom: solid 3.5px ${(props) => props.theme.color.secondary};
  display: inline-block;
  margin: auto;
  overflow: hidden;
  ...
`;

export const CarouselRotatorItem = styled.div`
  animation: ${slideUp} 1.5s;
`;

애니메이션은 keyframes를 활용해 CSS로 구현, display 속성과 태그들 간의 관계를 주의해주자!

 

Reference🔽

요즘 핫한(?) slide up 형태의 carousel 만들기

JavaScript - setInterval, setTimeout 사용법

React Hooks: useRef 사용법

type for useRef if used with setInterval, react-typescript