カテゴリー
お問い合わせ

たった数行でおしゃれに！clip-path: inset()を使ったモダンなテキストホバーアニメーション

HTML/CSS
目次

Webサイトのリンクやボタンにマウスを乗せたとき（ホバー時）、ただ文字色をパッと変えるだけでは少し物足りないと感じることはありませんか？

もっとユーザーの目を引くような、リッチでスタイリッシュな演出を加えたい！ そんな時に大活躍するのが、CSSの clip-path プロパティとHTMLの data属性 を組み合わせたアニメーションテクニックです。

今回は、JavaScriptを一切使わずに、「文字が左から右へなめらかに色付いていく」という、モダンでおしゃれなホバー演出を実装する方法をご紹介します！ ナビゲーションメニューや見出しなどでよく使われる、覚えておいて損はないCSSスニペットです。

デモ動作

See the Pen clip-path: inset() by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい！（別タブで開かれます）

実装コードの紹介

【HTML】

<div class="l-wrap">
  <a href="#" class="p-hover-text" data-text="Hover Me!">
    Hover Me!
  </a>
</div>

【CSS】

/* =========================================
   ホバー演出のコード
========================================= */
.p-hover-text {
  position: relative;
  display: inline-block;
  font-size: 42px;
  font-weight: bold;
  color: #ccc; /* ホバー前のベースカラー（薄いグレー） */
  text-decoration: none;
}

/* 疑似要素で上に被せるテキストを生成 */
.p-hover-text::before {
  content: attr(data-text); /* data-text属性の値を読み込む！ */
  position: absolute;
  top: 0;
  left: 0;
  color: #1bb4d4; /* ホバー時のカラー（水色） */
  white-space: nowrap;
  
  /* 初期状態は右側100%を切り抜いて（隠して）おく */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.4s ease-out;
}

/* ホバー時に切り抜きを解除して全表示する */
.p-hover-text:hover::before {
  clip-path: inset(0 0 0 0);
}

コードの解説・こだわったポイント

attr(data-text) でHTMLからテキストを取得する

今回の演出の肝は、「全く同じテキストを2つ重ねて、上のテキストだけを徐々に表示させる」という仕組みです。

もしCSSの content プロパティに直接文字を書き込んでしまうと、HTMLとCSSの両方でテキストを管理しなければならず、修正漏れの原因になります。

/* HTMLのdata-text属性の値を表示する */
content: attr(data-text);

clip-path: inset() による直感的な切り抜き

以前の記事でも登場した clip-path ですが、今回は図形を作る polygon() ではなく、要素を四角く切り抜く inset() を使用しています。

inset() は、上・右・下・左の順（marginやpaddingと同じ順番）で、「外側からどれくらい内側に切り込むか」を指定します。

初期状態: clip-path: inset(0 100% 0 0);
（右側から100%切り込む ＝ 完全に隠れた状態）

.p-hover-text::before {
  /* 初期状態は右側100%を切り抜いて（隠して）おく */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.4s ease-out;
}

ホバー時: clip-path: inset(0 0 0 0);
（切り込みをゼロにする ＝ すべて表示された状態）

/* ホバー時に切り抜きを解除して全表示する */
.p-hover-text:hover::before {
  clip-path: inset(0 0 0 0);
}

この clip-path の値を transition でなめらかに変化させることで、左から右へワイプしていくようなアニメーションを実現しています！

補足：参考リンク

・MDN: attr()
・MDN: clip-path (inset)

まとめ

今回は、HTMLの data属性と CSSの clip-path を組み合わせた、スタイリッシュなテキストホバー演出をご紹介しました。

少し前であれば width を 0 から 100% に変化させて overflow: hidden; で隠す……といった手法もありましたが、clip-path を使えばレイアウト崩れの心配もなく、非常にシンプルに実装できます。

ユーザーの目を引くちょっとしたインタラクションは、Webサイトの質やUXを高めてくれます。 保守性を意識しつつ、こうした表現力豊かなCSSテクニックをこれからもどんどんストックしていきたいと思います！

Prev
Next

関連記事