ホバーのアニメーション一覧 | アニモーション

Cursor Glow Ring

マウスカーソル周りにグロー付きのリングが追従するインタラクション。

SVG Line Draw Hover

ホバーでSVGのアイコンパスが手書き風に描かれるエフェクト。

GSAP Color Morph Hover

ホバーでGSAPによりグラデーション背景がモーフィングするカード。

Canvas Trail Hover

ホバーでマウスの軌跡がキャンバス上に光の線として残るエフェクト。

Perspective Door Hover

ホバーでカードが3Dドアのように開くperspective+transform演出。

Mask Text Reveal Hover

mask-imageで隠されたテキストがホバー位置に応じて現れるエフェクト。

Three.js Wireframe Hover

ホバーでThree.jsのワイヤーフレーム球体がゆっくり回転するインタラクション。

GSAP Parallax Layers Hover

マウスに応じて複数レイヤーがGSAPで異なる速度で動くパララックスホバー。

Clip Path Reveal Hover

clip-pathの円形マスクがホバーで中心から広がり全体を露出する。

Anime Stagger Grid Hover

グリッドセルがマウスに近い順にアニメーションするanime.jsスタガー演出。

Canvas Ripple Hover

Canvas上で水面の波紋エフェクトがマウス位置から広がるホバー演出。

Tilt Shine Hover

ホバーで3Dチルト+光の反射がマウスに追従するインタラクション。

Liquid Hover Card

ホバーでSVGフィルターの液状エフェクトがカード全体に広がる。

ホバーで中央から左右に広がるアンダーライン。

Image Zoom Container

ホバーで画像がズームしつつオーバーレイが現れる。

Dot Indicator Tabs

アクティブタブの下にドットが移動するタブナビ。

Slide Background Item

ホバーで背景色が左からスライドするリストアイテム。

Parallax Depth Hover

マウスに応じてレイヤーが視差移動する。

Rotating Icon Hover

ホバーでアイコンが回転するメニューアイテム。

Clip Reveal Image

ホバーでclip-pathが広がり画像が現れる。

Skew Card Hover

ホバーでわずかにスキューがかかるカード。

Color Wipe Link

ホバーでテキスト色が左から塗り替わるリンク。

Border Trace Hover

ホバーでボーダーが一筆書きのように描かれるカード。

Stagger List Hover

ホバーで子要素が時間差でハイライトされるリスト。

Magnetic Nav Items

カーソルに吸い寄せられるナビゲーションリンク。

マウス位置に光源が追従するスポットライトカード。

Scale + Fade Menu

ホバーでスケール＋フェードするメニューアイテム。

マウス位置に応じて3D回転するカード。ポートフォリオに。

Underline Slide

ナビゲーションリンク用。左→右へスライドするアンダーライン。

Proバッジ付きのアニメーションはProプランでコードをコピーできます。