1.1.0 • Published 8 months ago

@lasbe/react-card-animation v1.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

NPM Downloads

@lasbe/react-card-animation

react_card_animation

손쉽게 카드 뷰 컨테이너에 3D 인터랙션 애니메이션을 적용할 수 있는 리액트 패키지입니다.

install

$ npm i @lasbe/react-card-animation

example

import { CardAnimation } from '@lasbe/react-card-animation';

export default function App() {
  return (
    <div>
      <CardAnimation>
        <div className={`w-[300px] h-[200px]`}>...</div>
      </CardAnimation>
      <CardAnimation angle={10} mouseOutDelay={0}>
        <div className={`w-[300px] h-[200px]`}>...</div>
      </CardAnimation>
    </div>
  );
}

적용할 컨테이너 바깥에 CardAnimation을 감아줍니다.

Props

NameValueDefault Valuedescription
childrenReact.ReactElement-애니메이션을 적용할 자식 컴포넌트
anglenumber30애니메이션 회전 각도, 클 수록 더 많이 회전함
mouseOutDelaynumber500마우스를 벗어날 때 원상복구 되기까지의 딜레이 시간 (ms)
1.1.0

8 months ago

1.0.0

1 year ago

0.0.1

1 year ago