くまだどうも、 くまだ です。
Web制作でよく見かけるものとして、例えばナビのメニューだったりテキストの部分をホバーするとアンダーラインが流れてくるような演出があります。
スクロールしたらテキストが横から出てくるアニメーションの記事はこちらです。
よく見かけるアンダーラインのアニメ―ション
通常、例えばナビのメニュー部分にマウスでホバーさせたときにアンダーラインのアニメーションをするのであれば、以下のような記述をします。
参考サイトはこちらです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="container">
<div class="inner">
<ul class="list">
<li class="item">
<a href="#" class="link">
item
</a>
</li>
<li class="item">
<a href="#" class="link">
item
</a>
</li>
<li class="item">
<a href="#" class="link">
item
</a>
</li>
</ul>
</div>
</div>
</body>
</html>@charset "UTF-8";
.inner {
width: 50%;
margin: 10% auto;
}
.list {
list-style: none;
}
.item {
font-size: 36px;
}
.link {
color: black;
text-decoration: none;
display: inline-block;
position: relative;
cursor: pointer;
}
.link::before {
position: absolute;
content: '';
left: 0;
right: 0;
bottom: -3px;
width: 100%;
height: 1px;
background-color: black;
transform: scale(0, 1);
transform-origin: left;
transition: transform .3s;
}
.link:hover::before {
transform: scale(1);
}これをブラウザでみるとこんな感じの動きです。
こちらの記述はGoogleで検索すれば割とよく出てくるような記述です。
Keyframesを使っても実現できます。上記のものよりCSSはだいぶすっきり記述できました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="container">
<div class="inner">
<ul class="list">
<li class="item">
<a href="#" class="link">
test
</a>
</li>
<li class="item">
<a href="#" class="link">
test
</a>
</li>
<li class="item">
<a href="#" class="link">
test
</a>
</li>
</ul>
</div>
</div>
</body>
</html>@charset "UTF-8";
.inner {
width: 50%;
margin: 10% auto;
}
.list {
list-style: none;
}
.item {
font-size: 36px;
}
.link {
text-decoration: none;
color: black;
}
.item .link:hover {
background: linear-gradient(black,black) left bottom/100% 1px no-repeat;
animation: Underline .4s;
}
@keyframes Underline {
0% {
background-size: 0% 1px;
}
100% {
background-size: 100% 1px;
}
}
これをブラウザで確認するとこんな感じです。
元ネタは前に検索して見かけたのですが、ソース元は失念してしまいました。
keyframesは結構便利なので、これを使いこなせるようになるとJavaScriptを使わなくてもいろいろな表現をすることができます。表現の幅を広げたいなら、CSSのkeyframesを使ったアニメーションのやり方を覚えておくといいです。
こちら、@keyframesの部分のbackground-sizeのpx指定のところを変更すれば、ホバーしたときの最初と最後の線の太さを変えることができます。
@keyframes Underline {
from {
background-size: 0% 5px;//最初太く
}
to {
background-size: 100% 1px;//最後は細く
}
}
これをブラウザで確認すると、
また、backgroundのleft bottomをright bottomに変更すると右からアンダーラインのアニメーションができます。
.item .link:hover {
background: linear-gradient(black,black) right bottom/100% 1px no-repeat;
animation: Underline .4s;
}
こんな感じで、仮に参考サイトからコードをコピペしても、コードの一部を弄って自分なりのコードに改変するのも勉強になります。特に、動作確認をするのには。
ここを変えたら、動きはどうなるのか、というのを考えながらコーディングするとけっこうおもしろいです。
ここまで読んでくださりありがとうございました。