【CodePen】チルトエフェクトのアイデア12選

💡 実装のポイント
jQuery版tilt.jsをdata-tilt属性ではなく$(".card").tilt({...})で直接初期化する構成。maxTilt（傾きの最大角度）・speed・glare/maxGlare（光沢の有無と強さ）・scale（ホバー時の拡大率）をオプションで一括調整できる。CSS側は.cardにtransform-style: preserve-3d、タイトル文字にtranslateZ(20px)を付けて浮き上がらせている。

💡 実装のポイント
ライブラリを使わずuseTiltという自作フックでmousemoveの座標を--px・--pyというCSSカスタムプロパティに書き込む方式。CSS側で--x: calc(var(--px) - 0.5)のように中央基準の値へ変換し、:hover時のrotateY(calc(var(--x) * 45deg))で傾きを表現している。useReducerで管理するスライドのカバーフロー演出と組み合わさっているため、tilt部分だけ抜き出すならuseTiltフックとCSSカスタムプロパティ周りのみ移植すればよい。

💡 実装のポイント
TweenLite（GSAP）で3枚重ねた背景レイヤーそれぞれにrotationY・rotationX・skewX/Yの係数を変えて設定し、奥行きの異なるパララックス感を出している。mousemoveのたびにtiltImage()を呼んで各レイヤーへ個別のtweenを流す構成なので、レイヤー数を増減させれば揺れの層を調整できる。anime.jsによるテキストのランダム切り替えは独立した演出なので、tilt部分だけ流用する場合はtiltImage()関数とレイヤーのHTML構造だけ抜き出せばよい。

💡 実装のポイント
同じ画像を3枚重ねた#hero-section-a/b/cそれぞれにrotationY: 0.05〜0.15 * sxPosのように異なる係数を設定し、TweenMaxでbodyのmousemoveに反応させている。係数の差が大きいほど手前と奥のズレが強調される仕組みなので、枚数や係数を変えるだけでパララックスの強さを調整可能。transformPerspective:500を各レイヤーに指定しているため、奥行きの出方は個別にチューニングできる。

💡 実装のポイント
TiltFxクラスがlayersTotal（初期値4）の数だけ.background__copyをJSで動的生成する構成。マウス位置を線形補間の計算式で「移動量・回転量・拡大率」に変換し、レイヤー番号ごとに異なる値をTweenMaxで適用している。layersTotalの数値を変えるだけでレイヤー数を増減でき、未使用のzoom()/reset()メソッドを呼び出せばクリック時の演出も追加できる。

💡 実装のポイント
ライブラリなしの素のJSでHover3D()関数を自作し、カード内でのマウス位置からrotateX・rotateYを計算してstyle.cssTextに直接書き込む構成。光沢部分はMath.atan2()でカーソル角度を求め、その角度をグラデーションの向きに反映させることでガラス風の反射を再現している。configオブジェクトのrotation（傾きの強さ）・shine（光沢の強さ）を変えるだけで質感を調整できる。

💡 実装のポイント
1つ目のPenと同じjQuery版tilt.jsを$('.card').tilt({maxTilt:10, glare:true, maxGlare:.4})で初期化し、CSSの:hoverでプロフィールカードの.contentをbottom:-100% → 0にスライドインさせる演出を重ねている。グラデーションの色は.card:nth-child(1〜3) .contentごとに個別指定なので、カード枚数分だけ色をローテーションすれば統一感を保ちながら量産できる。

💡 実装のポイント
各カードの.illo-wrapperにdata-tiltを付けるだけでtilt.js系ライブラリが自動初期化される構成。中身は複雑なSVGイラストだが、tilt自体はコンテナ1つに属性を付与するだけなので、カード内のコンテンツをどれだけ複雑にしても傾きの実装コストは変わらない点がポイント。アイコン部分をシンプルなロゴや画像に差し替えるだけで別デザインに転用しやすい。

💡 実装のポイント
jQuery不要のvanilla-tilt.jsを使い、JS側のコードは一切書かずにdata-tilt-perspective・data-tilt-speed・data-tilt-reverse・data-tilt-glare・data-tilt-max-glare・data-tilt-easingといったHTML属性だけで挙動を細かく設定している。名刺サイズのプレビューカードは--w・--hというCSSカスタムプロパティで実寸比率を再現しているので、傾き設定と見た目のサイズ調整を独立して変更できる。

💡 実装のポイント
ボタン単体にdata-tiltとjQuery版tilt.jsの$('.tilt-button').tilt({scale:1.3, speed:500, transition:true})を組み合わせたミニマムな構成。中の絵文字だけをtranslateZ(20px)で浮かせているので、ボタンの土台と中身の奥行きが分離して見える。カードではなくボタン1個にtiltを使う場合の最小実装例として参考にしやすい。

💡 実装のポイント
TweenMaxによるrotationY/X/Zのtilt処理に加えて、カーソルが画面のどの象限（右上寄りか左下寄りか）にあるかで.color1〜.color5というSVGドットパターンの塗り色をTimelineMaxで切り替える二重構成。傾きだけでなく色も同時に変化させることで、トレーディングカードのようなホログラム質感を再現している。色の切り替えロジックを外せば通常のtiltバッジとしても流用可能。

💡 実装のポイント
ライブラリなしのtransforms()関数が要素中心からのマウス距離をconstrain（初期値300）で割ってrotate角度を算出し、requestAnimationFrameでなめらかに描画する構成。数値が小さいほど傾きが強く反応する。ポートフォリオサイトを想定したレイアウトで、斜めに配置したテキストが:hover時に画像をopacity表示する仕掛けと組み合わせているが、tilt部分はtransforms()関数だけ抜き出して他の要素にも転用しやすい。