hover でアンダーラインを動かしたい

hover でできることがいろいろありすぎて、楽しいんですが何を使おうか迷ってしまいます。

それと同時に、こうしたいっていう形があっても、なかなかピンポイントでそれを紹介してくれるサイトや記事が見つからなかったりして、でも妥協するのも嫌なので自分でなんとかするんですが、大変。でも勉強になる。

今回作りたいと思ったのは、次のようなものです。

こちらの7番目のもの。

See the Pen dyPNmNe by ishi (@ishi-nagoya) on CodePen.

仮にAとしますが、こちらのように、ポインターが乗ったときは真ん中からラインが出てきて、

こちらの6番目のもの。

See the Pen wvBgmPw by ishi (@ishi-nagoya) on CodePen.

仮にBとしますが、ポインターが下りた時は、こちらのように外側へラインが消えてゆく、みたいな、AとBが合わさったものを作りたい。

真ん中をスタートにするときは、 Aで使っているように、transform-origin: center top; にすればいいみたい。じゃあマウスが下りたときの処理だけ、Bのコードに書き換えればいけるのかな?と思っていろいろやってみても、まったくうまくいかない。

頭を抱えてうんうんと悩んでいたのですが、AとBの、それぞれの考え方の違いに気が付きました。

ざっくり言うと、疑似要素をひとつ使っているか、ふたつ使っているかの違い。疑似要素ひとつの中では、ひとつの方向へしか動けない。右から右、左から右、中央から中央、など。

自分が目指しているものは、中央から左右、つまり中央から左へと、中央から右への動作、というふたつの動作をしたいので、疑似要素をひとつしか使っていないAでは無理でした。

なのでBをベースにして考えます。疑似要素をふたつ使っているのですが、なんのことはない、ボタンを半分に区切り、左右に疑似要素を振り分けます。左側を疑似要素である::beforeを使い、左端から右端(ボタン全体でいうと中央)へ背景色を変え、右側を疑似要素である::afterを使い、右端から左端 (ボタン全体でいうと中央)へ背景色を変える処理をしているだけでした。center と絡めようと思ってしまい、無駄に混乱してしまいました。width: 50% がキモでした。

こうなるとあとは単純で、

.button:hover::before,
.button:hover::after {
  transform: scale(1, 1);
}

この部分を、

.button:hover::before{
  transform-origin: right top;
  transform: scale(1, 1);
}
.button:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}

こんな感じに書き換えてあげたらいけました。よかったよかった。

気づけば簡単なんですが、気づくまでの道のりが大変ですよね。でも気づいたときの快感というか、スッキリ感はくせになりますね。

あと、コードペンを使ってみましたが、便利でした。簡単だし。世の中には素敵なサービスがたくさんあるんだなあと、しみじみ思います。そういうものを、なるべく享受して生きていきたいです。

かしこ

タイトルとURLをコピーしました