どのようなcardfolioです！え？

cardfolio!GatsbyベースのCardfolioサイトフレームワークです.

Wait, what is cardfolio?

下記参照

そうですね.名刺のようなポートフォリオサイトです.それは本物の名刺のように紙の質感と回転があります.畝
あなたがビジネスカードを誰かに渡すとき、Cardfolioサイトの本当の価値は確かに見られます.以下は私の名刺です.(携帯電話でこのサイトを閲覧する場合は、からアクセスすることができますhere )

あれはどうだった?あなたのような受信機に大きな印象を与えることができるだけ感じて😄
そして、今回は、誰もが自分のカードフォリオサイトを作成できるようにOSSとしてgithubにリリース😙 ロゴもデザインしました🖌
Cardfolio!
前に反応を使用している場合は、簡単にそれを作成することができます!また、デザインと紙のテクスチャをカスタマイズすることができます.

どのようにビジネスのカードを回転させるには？

あなたは思うかもしれない

How this rotation implemented?

これについて説明させてください.

両側のページ

カードの両側を作成するには、これらの手順を実行します.

フロントとバックのコンポーネントをそれぞれ作成し、コンテナの下に配置します.

変換ロータリーによって、バックサイドコンポーネントのy軸を180度回転します.

フロントサイドと背面の間を切り替えるには、コンテナを回転させます.

しかし、落とし穴があります.それが反転すると、ミラー反転フロントサイドコンポーネントが表示されます.

これは、トランスフォーム3 DでDOMをひっくり返すと、オブジェクトの背面がデフォルトで表示されるためです.これを解決するためには、隠された状態に設定されたバックグラウンド視認性によってデフォルト動作を変更する必要があります.

.frontSide {
  backface-visibility: hidden; 
}

.backSide {
  backface-visibility: hidden; 
}

この方法は、あなたがそれを反転する場合は、フロントサイドは何も表示され、その結果として、画面の上部にトップに表示されます.サンプルコードhere

ユーザー操作に応じて回転

ユーザーをドラッグすると、カードを回転させます.まず、ドラッグを検出するには、簡単に使用してフックを使用して取得することができます

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 詳細は

概要

あれはどうだった?ギャツビーは、定期的にウェブサイトを構築するための素晴らしいフレームワークです.さらに、それはギャツビーの様々な利点を活用しながら開発することができますので、それは、ギャツビーに基づいてOSSを構築する良いアイデアだ🎁
私はこの記事の読者の1つはcardfolioを使用して自分のカードフォリオサイトを作ることを願っています!はい!