【Vanilla JS】日本語テキストをホバーしたらclip-pathで円形に切り抜いて英語テキストを表示

[ ID : 10980 ]
シルバー
【Vanilla JS】日本語テキストをホバーしたらclip-pathで円形に切り抜いて英語テキストを表示
実装目安
3分

概要

日本語テキストを配置した対象エリアをホバーしたらマウスカーソルの周りをCSSのclip-pathで円形に切り抜き、英語テキストを表示する処理をJavaScriptで実装。

用途・要件

  • 対象エリアに日本語テキストを配置する。
  • 対象エリアをホバーしたらマウスカーソルの周りをCSSのclip-pathで円形に切り抜き、切り抜いた円に英語テキストを表示する。
  • 対象エリアをホバーしたタイミングで、円が拡大して表示される。ホバーが外れたタイミングで円が縮小する。
  • 画面をスクロールした際も、円がカーソルに追従する。(※DEMOプレビュー上では追従しないので、ローカル環境でご確認ください)
  • 円はカーソルに少し遅れて追従する。
  • 同一ページへの複数設置可能。

検証ブラウザ

  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)
  • Microsoft Edge(最新)

注意事項

  • カーソルに追従する円の動きの滑らかさは、閲覧するブラウザに依存します。

実装

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

関連記事

全ての記事を見る

KONOCODEのメリット 無料会員登録