左から右へ流れるホバーアクションはカンタンに作れる
アンダーラインが伸び縮みするホバーアクションってよく見ますよね。
このアニメーション、多くの場合は左から伸びて左に縮みます。
でもひと工夫するだけで「左から右」へ流れるホバーアクションに変化させることができます!
このブログのグローバルアニメーションにもこの方法を取り入れています。
少しこだわったアニメーションを実装したいという方は、ぜひご覧ください!
【基本コード】左から右へ流れるホバーアクション
HTML
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">HTML</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">CSS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">JavaScript</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">WordPress</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">CONTACT</a>
</li>
</ul>
</nav>
SCSS
.navbar{
display: flex;
width: 100%;
height: 100vh;
justify-content: center;
align-items: center;
.navbar-nav {
display: flex;
justify-content: center;
.nav-item {
+ .nav-item{
margin-left: 1em;
}
a {
color: #17a2b8;
font-size: 20px;
text-transform: none;
position: relative;
padding: 0;
&:before{
content: '';
position: absolute;
right: 0;
bottom: -8px;
display: block;
width: 0;
height: 3px;
background: #17a2b8;
transition: .2s width linear;
}
&:hover{
&:before{
left: 0;
width: 100%;
}
}
}
}
}
}
【Demo】左から右へ流れるホバーアクション
See the Pen GRWKXBB by さおさん (@saio-th) on CodePen.
【Point】左から右へ流れるホバーアクション
- ホバー中のアンダーラインのポジションを「右から左」に切りかえる
【解説】左から右へ流れるホバーアクション
疑似要素でアンダーラインを作成して伸縮させる
まずはアンダーラインにあたる疑似要素を作ります。
疑似要素は親要素の a
タグを基準としてアニメーションさせるので、a
タグに position: relative;
を指定しておきます。
疑似要素は絶対配置で a
タグの一番下に配置させたいので、position: absolute;
と bottom: 0;
を指定します。
.navbar{
.navbar-nav {
.nav-item {
a {
&:before{
content: '';
position: absolute;
right: 0;
bottom: -8px;
display: block;
width: 0;
height: 3px;
background: #17a2b8;
transition: .2s width linear;
}
}
}
}
}
ホバー前は width
を 0
にしておき、ホバーしたら width
を 100%
にします。
これでアンダーラインの伸縮は完了です!
アンダーラインのポジションをホバー前後で切りかえる
ただしこのままでは「左から始まり左に終わる」アニメーションのままです。
これを「左から始まり右に終わる」アニメーションにしてあげなければなりません。
とはいえ、やることはカンタンです。
ホバー中のアンダーラインのポジションを「右から左」へ切りかえるだけです!
「初期設定は position: right」
「ホバーしたら posirion: left」と切りかえましょう。
.navbar{
.navbar-nav {
.nav-item {
a {
&:before{
content: '';
position: absolute;
right: 0; //ホバー前は右起点
bottom: -8px;
display: block;
width: 0;
height: 3px;
background: #17a2b8;
transition: .2s width linear;
}
&:hover{
&:before{
left: 0; //ホバー中は左起点
width: 100%;
}
}
}
}
}
}
この指定によって、
- ホバーしたら左を起点にアンダーラインが伸びる
- ホバーが解除されると右を起点にアンダーラインが縮む
ようになりました。
以上で「逆ムーディ勝山」流ホバーアクションが完成です!
【まとめ】左から右へ流れるホバーアクション
ホバー前後でポジションを右から左に切りかえるだけで、
「左から右へ流れる」ホバーアクションが完成しました。
アンダーライン以外にも応用がきく方法です。
上から下もアリ、下から上もアリ、斜め左から斜め右もアリです。
ぜひ自分なりのアニメーションを探してみてください!
以上です。
少しでもお役に立てたら嬉しいです。
Comments