[Tailwind.css] 무한으로 이어지는 슬라이더 구현하기(feat.리액트)

---

css, scss의 사용을 위해 항상 다른 파일을 만들어야 하거나

styled component처럼 새 파일이나 마찬가지인 코드를 작성해야 하거나

그렇다고 부트스트랩처럼 자유도가 떨어지는 것 도 아닌

테일윈드를 요즘 애용중이다.

 

테일윈드로 아래처럼 연속으로 이어지는 것 같은 x축 슬라이드를 구현해보고자 한다.

 

---

1. tailwind.config.js

테일윈드의 모든 추가 속성은 이곳에서 적용시킨다.

키 프레임과 애니메이션은 헷갈리지 않게 아래의 루트에 넣어주자.

 

module.exports = {
  theme: {
    extend: {
      keyframes: {
       키프레임 적는 곳
      },
      animation: {
      애니메이션 적는 곳
      }
    },
  }
}

 

참고로

본인의 버전은 아래와 같다.

 

{
  "dependencies": {
    "@craco/craco": "^6.3.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^9.8.7",
    "postcss": "^7.0.38",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.16"
  }
}

 

무튼, 이렇게 세팅을 해 두고 slider라는 키프레임과 애니메이션을 만들어주자.

처음에 헷갈렸던 것이 버전의 차이인지 모르겠는데

어떤 블로그는 animation과 keyframes 이름을 큰따옴표로 묶었는데("slider") 나에게 그것은 적용되지 않았다.

 

module.exports = {
  theme: {
    extend: {
      keyframes: {
       slider: {
          '0%': {
            transform: 'translateX(0px)'
          },
          '100%': {
            transform: 'translateX(-1400px)'
          }
        },
      },
      animation: {
      	slider: 'slider 5s linear infinite'
      }
    },
  }
}

 

키프레임과 애니메이션 이름은 같아야 하고, pure css에서 적용했던 것 처럼 slider에게 animation을 적용시켜주자.

조금 대충 설명하는 것 일지 모르겠지만...

 

translateX(가로) 100%에서의 픽셀값은 자신의 프로젝트에 맞게 이어지는 착시를 불러오는 숫자 까지 맞추면 된다. 

중요한건 animation에 ease를 넣으면 안되고 linear여야 한다.

 

---

2. 애니메이션 적용

테일윈드는 이렇게 애니메이션을 만들면 자기 맘대로 변수를 'animate-지은이름' 로 생성해버린다.

때문에, 내 프로젝트 기준 아래와 같이 적용시키면 된다.

 

<div className="flex flex-row mb-10 absolute animate-slider">
<!-- 이미지들 리스트 -->
</div>

 

config에서 slider라고 지었으니 위와 같이 적어주자.

구현 개념은 relative, overflow-hidden > absolute, animate-slider > 이미지들 순으로 태그가 생성되게 하면 된다.

이미지들이 이어지는 듯 하려면 같은 이미지를 두 번 반복해 붙여넣기도 해야한다.

 

 <div className="mainSkill bg-indigo-600 pb-16 relative overflow-hidden">
            <div className="flex flex-row mb-10 absolute animate-slider">
                <img className="w-100 h-full mx-10" src={html} alt="html logo" />
                <img className="w-110 h-full mr-10" src={css} alt="css logo" />
                <img className="w-100 h-full mr-10" src={javascript} alt="javascript logo" />
                <img className="w-120 h-full mr-10" src={react} alt="react logo" />
                <img className="w-120 h-full mr-10" src={vue} alt="vue logo" />
                <img className="w-120 h-full mr-10" src={nuxt} alt="nuxt logo" />
                <img className="w-120 h-full mr-10" src={scss} alt="scss logo" />
                <img className="w-120 h-full mr-10" src={styled} alt="styled logo" />
                <img className="w-130 h-full mr-10" src={tailwind} alt="tailwind logo" />
                <!-- 이미지 묶음 한번 더 반복 -->
                <img className="w-100 h-full mr-10" src={html} alt="html logo" />
                <img className="w-110 h-full mr-10" src={css} alt="css logo" />
                <img className="w-100 h-full mr-10" src={javascript} alt="javascript logo" />
                <img className="w-120 h-full mr-10" src={react} alt="react logo" />
                <img className="w-120 h-full mr-10" src={vue} alt="vue logo" />
                <img className="w-120 h-full mr-10" src={nuxt} alt="nuxt logo" />
                <img className="w-120 h-full mr-10" src={scss} alt="scss logo" />
                <img className="w-120 h-full mr-10" src={styled} alt="styled logo" />
                <img className="w-130 h-full mr-10" src={tailwind} alt="tailwind logo" />
            </div>
        </div>

 

깔끔한 코드가 아니라 부끄럽지만... 이렇게 구현하면 무한인 것 같은 슬라이더가 구현된다.

 

 

 

---

 

테일윈드에서 커스텀 애니메이션을 만드는 것에 조금이라도 도움이 되길 바란다!