복제배너는 처음 자리로 이동시키고(animation 속성) 1번부터 다시 실행 (infinite animation)
2. react-fast-marquee로 구현하기
밑의 참고 사이트의 공식 문서를 활용하여 구현하였다.
1) react-fast-marquee 설치하기
npm install react-fast-marquee --save
2) 사용하기
pauseOnHover 기능을 사용하여 hover되면 멈출 수 있게 하였다. useState에서 하나의 변수를 선언하여 호버했을 때가 이가 멈출 수 있게 하였다.
import Marquee from "react-fast-marquee";
const [isHovered, setIsHovered] = useState(false);
<div
onMouseOver={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<Marquee pauseOnHover={isHovered}>
I can be a React component, multiple React components, or just some
text.
</Marquee>
</div>
그런데 내가 참고한 사이트에서 크기를 마음대로 맞추지 못해 만들어 커스텀 마이징한 것을 보았다. 가볍게 쓸려면 2번의 경우를 사용하여 코드 짠 시간을 절약할 수 있지만, 디테일하여 디자인을 맞춰 짜고 싶다면 1의 방법을 추천한다.
🤩결과 화면
결과 화면
위의 이미지들이 돌아가는 이미지 슬라이드가 1번 방법을 활용하여 구현한 경우이고, 아래의 경우가 2번을 활용하여 만든 것이다.
