連動して動くカード（カーソル位置）
マウスの動きに合わせて、複数のカードがそれぞれ違う量だけずれて動く立体的な演出です。JavaScript が mousemove で取得したカーソル位置を、ステージ中心からのずれとして 0 を中心にした比率へ変換します。
解説
マウスの動きに合わせて、複数のカードがそれぞれ違う量だけずれて動く立体的な演出です。JavaScript が mousemove で取得したカーソル位置を、ステージ中心からのずれとして 0 を中心にした比率へ変換します。各カードには data-d に動く強さを持たせてあり、その値を比率に掛けて transform:translate() と rotate() へ渡すことで、近いカードは大きく、別のカードは逆向きに動き、奥行きのある視差が生まれます。マウスが外れると mouseleave で位置が元に戻ります。
活用シーン
ヒーローの動的なアクセント、製品紹介のビジュアル、ポートフォリオの導入など、静止画に生きた質感を足したい箇所に向きます。perspective と回転の組み合わせで、平面のカードが浮いて見えます。
- 動く強さ：各カードの
data-dを変えると、ずれ幅と方向（正負）を個別に調整できます。 - 滑らかさ：
transitionの秒数で追従の柔らかさが変わります。 - 配慮：マウス前提の演出なのでタッチ端末では動きません。動きが苦手な人向けに
prefers-reduced-motionで効果を切ると親切です。
使用例・適したシーン
- クリエイティブポートフォリオ
- アートディレクション系
- ブランドサイト
よくある質問
カードの動く量を変えたいです
各カードの data-d 属性の数値を変えます。値を大きくするとよく動き、マイナスにすると他のカードと逆方向へずれます。0 に近づけるとほとんど動かなくなります。
スマホのタッチでも動きますか
この実装はマウス移動を前提にしているため、タッチ操作では動きません。スマホでも演出を出したい場合は端末の傾きを使う仕組みなどに置き換える必要があります。