やってみようデモの中でマウスを動かしてみてください
アニメーション・演出マイナー(知る人ぞ知る)
カスタムカーソル
Custom Cursor
マウスの矢印の代わりに丸い印が出て、少し遅れてぬるっとついてくる。リンクの上では大きくなる。
別名カーソル追従オリジナルカーソルマウスストーカーカーソルエフェクト
どこで使われている?
- よく見かける場所
- デザイン会社、アーティストのポートフォリオ、ブランドサイト
- 使うとよい場面
- 見た目にこだわった、遊び心のあるサイト
- 避けたい場面
- 業務サイトや、正確な操作が必要なサイト
補足日本では「マウスストーカー」とも呼ばれます。
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です(右上の「何を作る?」で変えられます)。
HTML / CSS / JavaScript で「カスタムカーソル(Custom Cursor)」を実装してください。 動き:通常のマウスカーソルを隠し、小さな点と、少し遅れて追いかける大きな輪を表示する。輪はなめらかに追従させ、ボタンやリンクの上では大きく広がる。スマホでは表示しない。 使う部品:cursor: none + マウスを追いかける要素で自作
もっと詳しく:プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | cursor: none + マウスを追いかける要素で自作 |
|---|---|
| iPhoneアプリなら | 一般的ではない(マウス向け) |
| Androidアプリなら | 一般的ではない(マウス向け) |
| Flutterなら | MouseRegion で自作 |
| React Nativeなら | 一般的ではない(マウス向け) |