画面の奥へと続くような立体感と、ユーザーの操作に連動するインタラクティブな動き。 マウスカーソルの動きに合わせてテキストが動く「パララックス」は、サイトに圧倒的な没入感をもたらします。
「こういう動きはJavaScriptを使わないと無理なのでは？」と思うかもしれませんが、実はCSSの工夫だけで「マウスに追従しているように見える」美しい表現が可能です。 この記事では、SWELLにコピペするだけで実装できる、3D空間を利用した視差効果や、最新のCSSを活用したトラッキングアニメーションを5つ紹介します。
Dynamic Depth Shadow（ダイナミック・デプス・シャドウ）
マウスを乗せると、テキストが手前に浮き上がり、複数の影が奥へと大きく広がります。Z軸（奥行き）のパララックス効果を利用した、立体的でインパクトのあるアニメーションです。
See the Pen Dynamic Depth Shadow by BaseKENT (@basekent) on CodePen.
調整方法
- 影の伸び具合:
text-shadowの Y軸（下方向）の数値をさらに大きくすると、より高い位置から見下ろしているような深いパララックス効果が得られます。 - 影の色:
#cccなどの部分をサイトのテーマカラーの濃淡に変えると、カラフルな立体ブロックのようになります。
9-Grid 3D Tracking
【最新CSS技術】 要素を9つの透明なグリッドに分割し、マウスがどの位置にあるかを判定してテキストをその方向へ傾けます。JavaScriptを使わずに「疑似マウス追従」を実現する、非常に革新的でクールなコードです。
See the Pen 9-Grid 3D Tracking by BaseKENT (@basekent) on CodePen.
調整方法
- 傾きの角度 (
15deg): 角度を大きくすると、よりダイナミックにマウスの方向へ顔を向けます。 - ※このコードは最新の
:has()擬似クラスを使用しています。現代の主要ブラウザ（Chrome, Safari, Edge等）では完全に動作しますが、極端に古いブラウザではただの静止テキストになります。
Ghost Offset Parallax（ゴースト・オフセット）
背後に透明度の高い「ゴースト」を配置し、ホバー時に本体とは逆の方向へスライドさせます。2つのレイヤーが異なる速度・方向で動くことで、錯覚によるパララックス効果を生み出します。
See the Pen Ghost Offset Parallax by BaseKENT (@basekent) on CodePen.
調整方法
- パララックスの距離: ホバー時の
translate(-15px, -15px)の数値を大きくすると、ゴーストがさらに遠くへ離れ、奥行き感が強調されます。 - データ属性: HTMLの
data-text="Contents"を変更するのを忘れないでください。
Mask Swipe Parallax（マスク・スワイプ・パララックス）
背景画像やグラデーションを文字の形に切り抜き（マスク）、ホバーすると背景だけが文字の中でスライドします。「窓の奥の景色が動く」ような、洗練されたパララックス表現です。
See the Pen Mask Swipe Parallax by BaseKENT (@basekent) on CodePen.
調整方法
- 背景を画像にする:
background: url('画像のURL');と指定すれば、文字の中に写真を表示でき、ホバーで写真がスクロールする美しい表現になります。 - 背景サイズ (
300%): サイズを大きくするほど、スクロールした際の移動距離（景色が変わる量）が大きくなります。
Split Shift 3D（スプリット・シフト・3D）
テキストを上下半分に分割し、ホバーすると「上半分は手前へ、下半分は奥へ」と別々のZ軸レイヤーに向かって移動します。要素が空間的に引き裂かれるような、SF的なパララックス効果です。
See the Pen Split Shift 3D by BaseKENT (@basekent) on CodePen.
調整方法
- 奥行きの深さ:
translateZの30pxと-30pxをより大きな数値（例：50px）にすると、真っ二つに割れて距離が離れていく感覚がさらに強くなります。 - 色の変更: 上半分（
::before）のcolorと下半分（::after）のcolorを別々の色に設定すると、割れた時に色が違うスタイリッシュなデザインになります。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
