ムーディ勝山?左から右へ受け流すホバーアクション

目次

左から右へ流れるホバーアクションはカンタンに作れる

アンダーラインが伸び縮みするホバーアクションってよく見ますよね。
このアニメーション、多くの場合は左から伸びて左に縮みます。

でもひと工夫するだけで「左から右」へ流れるホバーアクションに変化させることができます!

このブログのグローバルアニメーションにもこの方法を取り入れています
少しこだわったアニメーションを実装したいという方は、ぜひご覧ください!

【基本コード】左から右へ流れるホバーアクション

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;
        }
      }
    }
  }
}

ホバー前は width0 にしておき、ホバーしたら width100% にします。
これでアンダーラインの伸縮は完了です!

アンダーラインのポジションをホバー前後で切りかえる

ただしこのままでは「左から始まり左に終わる」アニメーションのままです。
これを「左から始まり右に終わる」アニメーションにしてあげなければなりません。

とはいえ、やることはカンタンです。
ホバー中のアンダーラインのポジションを「右から左」へ切りかえるだけです!

初期設定は 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%;
          }
        }
      }
    }
  }
}

この指定によって、

  • ホバーしたら左を起点にアンダーラインが伸びる
  • ホバーが解除されると右を起点にアンダーラインが縮む

ようになりました。

以上で「逆ムーディ勝山」流ホバーアクションが完成です!

【まとめ】左から右へ流れるホバーアクション

ホバー前後でポジションを右から左に切りかえるだけで、
左から右へ流れる」ホバーアクションが完成しました。

アンダーライン以外にも応用がきく方法です。
上から下もアリ、下から上もアリ、斜め左から斜め右もアリです。
ぜひ自分なりのアニメーションを探してみてください!

以上です。
少しでもお役に立てたら嬉しいです。

Share

Comments

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

CAPTCHA