とあるサイトで見かけたメニュー文字のマウスオーバーアニメーションが非常に良かったので、それを自分のCSSコードで書いてみたくなりました。
あ、今回はスマートフォンでは表現が確認できないので、パソコンで御覧ください。
（スマホで見てる人すみません・・・）
どんなメニュー・アニメーション？
見かけたサイトは、このブログの下にある参考サイトにリンクを載せておきます。
ホームページをなどをメインにしたデザイン会社のホームページですね。
マウスでメニューをクリックしようとして、ホバーした時に、文字がクリンと回転して、キラッと光るちょっとしたアニメーションですが、なんだかとっても気持ちがいい処理です。
そして、このサイトのメニュー箇所をコードを調べてどうやっているのかと思ってみたところ、Javascriptで制御している書き方をしていたので、今回はこれをCSSのみで構築してみようと思います。
完成デモ
文字にマウスを乗せてください。（パソコンのみの表現です）
ソースコード
html
<div class="demo" name="Hello World !!"></div>
css
.demo{
display:block;
text-align:center;
width:200px;
height:1.8em;
overflow:hidden;
color:transparent;
cursor:pointer;
}
.demo::before,
.demo::after{
content:attr(name);
display:block;
}
.demo::before{
color:black;
}
.demo:hover::before{
transition-property:margin;
transition-duration:0.3s;
margin-top:-1.8em;
}
.demo::after{
color:transparent;
background: linear-gradient(to right, transparent,white 30% 70%,transparent);
background-color:black;
background-clip:text;
background-size :50%;
background-repeat:no-repeat;
background-position:-50% 0%;
}
.demo:hover::after{
background-position:150% 0%;
transition-property:background-position;
transition-duration:0.3s;
transition-delay:0.2s;
transition-timing-function:linear;
}
解説
まず、普通のHTMLと違うのは、属性のname値に、表示する文字を書いている点です。
この値をattr()を使って、cssでbeforeとafterの疑似要素を作ります。
１行の表示ができたら、overflow:hidden;を使って、１行のみ表示する状態にしておきます。
マウスオーバーしたタイミングで、要素のmarginに１行分の高さをマイナス値でtransitionで移動させると、クルンと文字が回転するように見えるようになります。
次に、文字のキラッとした表現は、background-clip:text;を使って背景色を、に白のグラデーションを表示するようにしています。
これをマウスオーバー時に、background-positionで、ズラすように移動させることで、キラリン効果を表現します。
実際に、このコードをコピペした時にうまく動作しない場合は、サイズなどの値を書き換える必要があるので、その点いろいろとイジって試してみてください。
あとがき
実際に作ってみて、参考サイトと比べると、Javascriptでの表示はなんだかモッサリ感があるという感じがするんですけど、
cssは、非常に軽い動作をしてくれる事に気が付きますか？
やはり、webはできるだけcssで書いたほうが、軽く動作できるというメリットがあるようですね。
こうしたコードを作っていると時間を忘れて非常に楽しい時間だったので、改めて世の中のwebのコードをcss化して軽くするのが自分のミッションのように思えてきました。
いや〜いい仕事したので、コーヒーでも飲んで次の仕事に取り掛かりましょう。
お疲れ様でした！！
参考サイト
https://holon-inc.jp/
