2025-01-02

ホバーした場所に応じて傾くカード

ホバーJavaScriptカードタッチ操作可能

Card

カードの向きがホバーした場所に向けて傾きます。

実装のポイント

カード要素上のホバー位置をJavaScriptで取得し、その座標をもとにrotateプロパティで傾けています。カード上の相対位置はevent.offsetXやevent.offsetYでも取得できますが、カード内に別の要素があるとその要素の相対位置になってしまいます。そのためgetBoundingClientRect()でサイズと画面上の位置を取得しポインターの位置から算出しています。

中心からの度合いに応じて、rotateプロパティのベクトル向きとを変更しています。また、ホバーが外れたらもとに戻す処理も忘れずにいれましょう。

今回はpointerイベントで実装しているのでCSSのtouch-actiobプロパティを適切に設定すればタッチ操作でも傾けられます。

コード例

<div class="sampleCard">
  <div class="face front">
    <p>Card</p>
  </div>
</div>

.sampleCard {
  perspective: 500px;
  touch-action: pinch-zoom;
}

.face {
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);

  transition: rotate 0.2s var(--ease-out-cubic);
}

const cardElement = document.querySelector(".sampleCard");
const faceElement = cardElement.querySelector(".face");

const { width, height } = cardElement.getBoundingClientRect();

// カードの傾きの最大値（度）
const maxTilt = 20;

// カードの傾きを更新
const updateCardTilt = (x, y) => {
  faceElement.style.rotate = `${-y} ${x} 0 ${maxTilt}deg`;
};

cardElement.addEventListener("pointermove", (event) => {
  // 要素の幅と高さと位置を取得
  const { width, height, left, top } = cardElement.getBoundingClientRect();

  // 要素の中心位置を算出
  const centerX = width / 2;
  const centerY = height / 2;

  // ポインターのカードの中心からの位置を算出
  const offsetX = event.clientX - left;
  const offsetY = event.clientY - top;

  // ポインターのカードの中心からの度合い
  const x = (offsetX - centerX) / centerX;
  const y = (offsetY - centerY) / centerY;
  updateCardTilt(x, y);
});

// ポインターがカードから離れたらもとに戻す
cardElement.addEventListener("pointerleave", () => {
  updateCardTilt(0, 0);
});

ホバーした場所に応じて傾くカード

実装のポイント

コード例

HTML

CSS

JavaScript

関連作例