카드폴리오란! ?

카드폴리오! Gatsby 기반의 카드폴리오 사이트 프레임워크입니다.

Wait, what is cardfolio?

아래 참조



좋아요! 명함과 같은 포트폴리오 사이트입니다. 실제 명함과 같은 용지 질감과 회전이 있습니다.

Cardfolio 사이트의 진가는 명함을 누군가에게 건네줄 때 확실히 보입니다. 아래는 제 명함입니다. 이 명함을 받았다고 상상해 보세요.(모바일로 이 사이트를 탐색하면 here에서 액세스할 수 있습니다.



그건 어땠어? 방금 느낀 그대로 받는 사람에게 좋은 인상을 남길 수 있습니다😄

그리고 이번에는 누구나 나만의 카드 폴리오 사이트를 만들 수 있도록 Github에 OSS로 공개했어요😙 로고도 디자인했어요🖌

Cardfolio!

이전에 react를 사용해 본 적이 있다면 쉽게 만들 수 있습니다! 또한 디자인과 용지 질감을 사용자 지정할 수 있습니다.

명함을 회전하는 방법은 무엇입니까?

그렇게 생각 할수 있겠지

How this rotation implemented?

이것에 대해 설명하겠습니다.

양면 페이지

카드의 양면을 만들려면 다음 단계를 수행하십시오.

전면 및 후면 구성 요소를 각각 생성하고 위치가 절대인 컨테이너(카드) 아래에 쌓습니다.

rotateY 변환을 통해 후면 구성요소의 y축을 180도 회전합니다.

앞면과 뒷면 사이를 전환하려면 컨테이너를 회전합니다.

그러나 함정이 있습니다. 뒤집으면 거울 반전 전면 부품이 표시됩니다.



이는 transform3d로 DOM을 뒤집으면 객체의 뒷면이 기본적으로 표시되기 때문입니다. 이를 해결하려면 backface-visibility를 hidden으로 설정하여 기본 동작을 변경해야 합니다.

.frontSide {
  backface-visibility: hidden; 
}

.backSide {
  backface-visibility: hidden; 
}

이렇게 뒤집으면 앞면은 아무것도 표시되지 않고 결과적으로 뒷면이 화면에 상단으로 표시됩니다. 샘플 코드here

사용자 조작에 따라 회전

이제 사용자가 끌 때 카드를 회전합니다. 먼저 드래그를 감지하려면 react-use-gesture에서 useDrag라는 후크를 사용하여 쉽게 얻을 수 있습니다.

import { useSpring } from 'react-spring'
...
const bind = useDrag(({ down, movement: [moveX], last }) => {
  ...
})

드래그가 감지되면 현재 x 좌표가 y축 각도로 변환되고 카드가 회전됩니다.

   // convert Xposition to degree
   const degree = lastDegree + moveXToDegree(moveX)
...
　 // in draggin
  if (down) {
    // rotate as user dragging
    set({ transform: `rotateY(${degree}deg)` })
    return degree
  }
...

또한 사용자가 손가락을 떼면 애니메이션(ReactSpring 사용)과 함께 다시 앞으로 또는 뒤로 가로로 이동해야 합니다. 결정 논리는 다음 그림과 같습니다.

1사분면 또는 3사분면에서 각도를 줄입니다.

2사분면과 4사분면에서 각도를 늘립니다.

if (last) {
  // judge back or front and set degree
  const horizontalDegree = calcHorizontalDegreeToReturn(degree)
  setDegree(horizontalDegree)
}

자세한 내용은 Source Code을 참조하십시오.

요약

그건 어땠어? Gatsby는 정기적으로 웹사이트를 구축할 수 있는 훌륭한 프레임워크이며, 더욱이 Gatsby의 다양한 이점을 활용하면서 개발할 수 있기 때문에 Gatsby를 기반으로 OSS를 구축하는 것이 좋습니다 🎁
이 기사의 독자 중 한 명이 Cardfolio를 사용하여 자신만의 카드 폴리오 사이트를 만들기를 바랍니다! !