[React-Spring 애니메이션] 리액트 스프링으로 3D 카드 만들기

오늘 해볼 것은 위와 같이 움직이는 카드 뷰를 만들어볼 것이다.

Index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { useSpring, animated } from 'react-spring'
import './styles.css'

const calc = (x, y) => [-(y - window.innerHeight / 2) / 20, (x - window.innerWidth / 2) / 20, 1.1]
const trans = (x, y, s) => `perspective(600px) rotateX(${x}deg) rotateY(${y}deg) scale(${s})`

function Card() {
  const [props, set] = useSpring(() => ({ xys: [0, 0, 1], config: { mass: 5, tension: 350, friction: 40 } }))
  return (
    <animated.div
      class="card"
      onMouseMove={({ clientX: x, clientY: y }) => set({ xys: calc(x, y) })}
      onMouseLeave={() => set({ xys: [0, 0, 1] })}
      style={{ transform: props.xys.interpolate(trans) }}
    />
  )
}

ReactDOM.render(<Card />, document.getElementById('root'))

 

여기서 calc 함수와 trans 함수가 쓰였는데, 간단하게 설명하자면 다음과 같다.

현재 window창의 높이와 너비에 중앙 값과 움짐임의 의존 값들을 을 배열로 만들어주고, trans함수로 css의 perspective 코드를 삽입해준다.

 

 

useSpring() 함수에서 초기 이미지의 xys 값을 0, 0, 1로 지정해준다.

그리고 config에서 각종 텐션 및 이미지 값들을 넣어주고, animation에 div를 호출해 mouse 이벤트 데이터 값을 calc 함수에 매개변수로 넣고, 결과를 보간으로 변경하고 style 태그를 삽입시킨다.

style.css

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: white;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu,
    roboto, noto, segoe ui, arial, sans-serif;
  background: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

#root {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f0f0f0;
}

.card {
  width: 45ch;
  height: 45ch;
  background: grey;
  border-radius: 5px;
  background-image: url(https://drscdn.500px.org/photo/435236/q%3D80_m%3D1500/v2?webp=true&sig=67031bdff6f582f3e027311e2074be452203ab637c0bd21d89128844becf8e40);
  background-size: cover;
  background-position: center center;
  box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.5s;
  will-change: transform;
  border: 15px solid white;
}

.card:hover {
  box-shadow: 0px 30px 100px -10px rgba(0, 0, 0, 0.4);
}