土曜のデザインインスピレーション #34【Muzli】
- 土曜のデザインインスピレーション
- 翻訳転載
個性的なカーソルエフェクトは、PCユーザーを楽しませる有能なアイテムです。Webサイトのテーマだけでなく、ブランディングとも連動させられます。
この記事では、CSSやJavaScriptを使った、クールなカーソルエフェクトのコードスニペットをご紹介します。
(※本記事はPCにおけるカーソルをテーマにする特性上、PCからの閲覧を推奨します)
目次
ユニークなカーソルエフェクトを作る前に、まずはさまざまなカーソルの状態について理解を深めておきましょう。
このコードスニペットは、CSSのカーソルプロパティがどのように機能するのかを理解するのにぴったりです。
See the Pen
Curse Cursors by Zack Hoherchak (@ChekTek)
on CodePen.0
尾を引くネオンが印象的なカーソルエフェクト。
どのサイトにも使えるデザインとは言えませんが、うまく使えば巧みなアニメーションと色の変化でユーザーの目を引けるはずです。
See the Pen
ThreeJS Toys – Neon Cursor by Kevin Levron (@soju22)
on CodePen.0
カーソルのデザインは、小さな矢印だけではありません。このスニペットでは、タイトルテキストに対してスポットライトのようなカーソルエフェクトをつけています。
大胆で印象的なデザインですが、CSSとJavaScriptはそれほど複雑ではありません。
See the Pen
Spotlight Cursor Text Screen by Caroline Artz (@carolineartz)
on CodePen.0
カーソルエフェクトとブランディングを結びつけたいなら、このスニペットに可能性を感じるはず。
控えめなデザインですが、だからこそさまざまな事業に活かせます。
See the Pen
Ink Cursor by Ricardo Mendieta (@mendieta)
on CodePen.0
ユーザビリティを向上させてくれる、CSSのスマートなカーソルエフェクト。
「blend-mode」プロパティを使うと、ページの内容や背景色に応じて、カーソルに視認性の高い色を与えられます。
See the Pen
Circle cursor with blend mode by Clement Girault (@clementGir)
on CodePen.0
コンテンツに応じてデザインが変化するカーソルエフェクト。
デフォルトでは円形ですが、リンクにカーソルをあわせると長方形に変化するほか、ヘッダーのナビゲーション要素にも対応しています。
See the Pen
Interactive Custom Cursor by hb 🦝 (@hbthen3rd)
on CodePen.0
一般的な矢印のカーソルエフェクトかと思いきや、どこにカーソルを置いても矢印が「中央のCTAボタン」を指します。
ヒーローエリアや重要なリンクを引き立てるのにぴったりのデザインです。
See the Pen
Mouse cursor pointing to cta by Aaron Iker (@aaroniker)
on CodePen.0
季節の行事にあわせてカーソルエフェクトを変えてみるのはいかがでしょうか?
最後はハロウィンにぴったりのカーソルエフェクトをご紹介します。半透明のデザインなら、コンテンツへの影響も抑えられます。
See the Pen
CursorGeist by Adam Kuhn (@cobra_winfrey)
on CodePen.0
ユニークなカーソルエフェクトは、使いかたによって大きなインパクトを与えられます。
アクセシビリティやユーザビリティを損なわないように配慮しつつ、Webサイトを引き立てましょう。
(執筆:Eric Karkovack 翻訳:Nakajima Asuka 編集:少年B 提供元:speckyboy)
カーソルにレントゲンのような効果を取り入れたWebデザイン8選
Workship MAGAZINE
マウスカーソルに反発する!?リペリングエフェクトを取り入れたコードスニペット9選
Workship MAGAZINE