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

김현재·2022년 3월 11일

홍보 사이트를 하나 만들어야 될 일이 있었는데, 위에서 아래로 글자가 슈루룩 올라오는 형태로 만들어달라는 의뢰가 들어왔다.
https://www.cbinsights.com/ 을 참고해서 만들어보았다.

1. 마크업 + CSS

자바스크립트보다 css를 사용해서도 충분히 만들 수 있어, css를 십분 활용해보았다

원리는 간단하다.
wrapper를 하나 두고, 그 안에서 내용들을 적절한 시간에 맞춰 돌려줄 것이다.
시간을 맞추는 것은 javascript를 활용할 에정이고, 돌려주는 효과는 css animation을 활용하여 제작할 예정이다

markup

<span className="rotator">
  <span>미디어렙사</span>
  <span>마케터</span>
  <span>에이전시</span>
  <span>광고매체의 이해도</span>
</span>

우선 돌려줄 내용들을 나열해준다.
rotator클래스가 carousel의 wrapper같은 역할을 해줄 예정이다. (모양을 잡아놓는 틀)

css

.rotator {
  display: inline-flex;
  position: relative;
  justify-content: center;
  width: auto;
  border-bottom: solid 4px white;
  overflow: hidden;
}

.rotator .item {
  display: none;
}

.rotator .active {
  animation: slider 1s;
}

@keyframes slider {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

애니메이션을 활용해서 아래에서 위로 올라오는 듯한 모양을 만들어주려고 한다.
translateY를 활용하면, 아래에서 위로 슈우욱 올라오는 듯한 모양을 만들 수 있다.

rotator클래스는 앞서 말한 것 처럼, wrapper 역할을 해줄 것이기에 overflow 및 position 설정을 해줬다.
글자 사이즈별로 wrapper의 사이즈도 바뀌었으면 해서 inline-flex를 사용했다.

item 클래스는 나열된 요소들이 처음에 보이지 않도록 하기 위해 만든 클래스이다.
자기 차례가 아닌 요소들은 item클래스가 부여되며, 화면에 보이지 않는다.

active클래스는 화면에 나타날 요소에 부여할 클래스로,
자기 차례가 되었을 때 애니메이션과 함께 나타나도록 한다.

jsx(javascript)

 const interval = useRef(null);

  useEffect(() => {
    interval.current = setInterval(() => {
      setCount((prev) => prev + 1);
    }, 2000);
    return () => clearInterval(interval);
  }, []);

2초 간격으로 화면이 바뀌었으면 해서, 2초에 한번씩 count를 증가시키도록 했다.
useRef를 활용하지 않고 setInterval을 사용할 시, 화면이 계속 렌더가 되어 성능이 좋지 못할 수 있기에, ref의 current안에다가 setInterval의 결과값을 저장해놓도록 했다.

final markup

<span className="rotator">
  <span className={count % 4 === 0 ? "active" : "item"}>미디어렙사</span>
  <span className={count % 4 === 1 ? "active" : "item"}>마케터</span>
  <span className={count % 4 === 2 ? "active" : "item"}>에이전시</span>
  <span className={count % 4 === 3 ? "active" : "item"}>광고매체의 이해도</span>
</span>