SNSをチェック

ナビゲーションメニューで使えるマウスホバーアニメーション

SHARE

これらのアニメーションは、ユーザーがメニュー項目にマウスを乗せたときにエフェクトを適用することで、インタラクティブで洗練されたデザインを実現します。

1. 背景色がスライドインするアニメーション

See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.

このエフェクトでは、マウスを乗せたときに背景色が左から右へスライドインします。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Slide-In Background</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #282c34;
      font-family: Arial, sans-serif;
    }

    .nav {
      display: flex;
    }

    .nav a {
      position: relative;
      display: inline-block;
      padding: 15px 30px;
      margin: 0 10px;
      color: #fff;
      text-decoration: none;
      overflow: hidden;
    }

    .nav a::before {
      content: '';
      position: absolute;
      left: -100%;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: #61dafb;
      z-index: -1;
      transition: left 0.3s ease;
    }

    .nav a:hover::before {
      left: 0;
    }
  </style>
</head>
<body>
  <nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </nav>
</body>
</html>

解説

  • HTML: ナビゲーションメニューのリンクを<nav>内に配置し、各リンクには<a>タグを使用しています。
  • CSS:
    • .nav a: リンクはrelativeポジションを使用しており、その子要素である::before擬似要素を制御します。
    • ::before: リンクの背後に配置された背景色のスライドインエフェクトを作成します。left: -100%で最初は見えない位置に設定し、transitionでスムーズな動きを指定しています。
    • a:hover::before: マウスホバー時にleft: 0を適用し、背景色がスライドして表示されるようにしています。

2. テキストに下線がフェードインするアニメーション

See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.

マウスホバー時にリンクテキストの下線がゆっくりとフェードインします。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Underline Fade-In</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #282c34;
      font-family: Arial, sans-serif;
    }

    .nav {
      display: flex;
    }

    .nav a {
      color: #fff;
      text-decoration: none;
      margin: 0 15px;
      position: relative;
      padding-bottom: 5px;
    }

    .nav a::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background-color: #61dafb;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .nav a:hover::after {
      opacity: 1;
    }
  </style>
</head>
<body>
  <nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </nav>
</body>
</html>

解説

  • HTML: 先ほどと同じように、<nav>内に<a>タグを使ってリンクを配置しています。
  • CSS:
    • .nav a: リンクにrelativeポジションを適用し、::after擬似要素を制御します。
    • ::after: 下線のアニメーションを作成するための擬似要素です。最初はopacity: 0で非表示にし、transitionでフェードインの効果を設定しています。
    • a:hover::after: マウスホバー時にopacity: 1を適用し、下線がゆっくりと現れるようにします。

3. テキストが上下にスライドするアニメーション

See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.

マウスホバー時にリンクテキストが下から上へスライドして入れ替わるエフェクトです。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Slide Text</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #282c34;
      font-family: Arial, sans-serif;
    }

    .nav {
      display: flex;
    }

    .nav a {
      position: relative;
      display: inline-block;
      color: #fff;
      text-decoration: none;
      padding: 10px 20px;
      overflow: hidden;
      height: 40px;
    }

    .nav a::before,
    .nav a::after {
      content: attr(data-text);
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease;
    }

    .nav a::before {
      top: 0;
      transform: translateY(0);
    }

    .nav a::after {
      top: 100%;
      transform: translateY(100%);
    }

    .nav a:hover::before {
      transform: translateY(-100%);
    }

    .nav a:hover::after {
      transform: translateY(0);
    }
  </style>
</head>
<body>
  <nav class="nav">
    <a href="#" data-text="Home">Home</a>
    <a href="#" data-text="About">About</a>
    <a href="#" data-text="Services">Services</a>
    <a href="#" data-text="Contact">Contact</a>
  </nav>
</body>
</html>

解説

  • HTML: 各リンクにdata-text属性を追加し、表示するテキストを設定しています。この属性を使って、同じテキストを::beforeと::after擬似要素に表示します。
  • CSS:
    • ::beforeと::after: 両方の擬似要素に同じテキストを表示しますが、::afterは最初に画面外に配置され、ホバー時に上へスライドして表示されます。
    • a:hover::before: マウスホバー時に、::beforeのテキストが上にスライドアウトし、::afterのテキストがスライドインします。

4. 簡単なカラー変更

See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.

ホバーすると、テキストの色が変わるシンプルなアニメーションです。

HTML:

<a href="#" class="hover-color">Hover me!</a>

CSS:

.hover-color {
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}

.hover-color:hover {
  color: #007BFF;
}

解説: transition プロパティを使用して、色の変更が滑らかに行われるようにしています。ホバー時にテキストの色が変わるシンプルでよく使われるエフェクトです。

5. アンダーラインスライドイン

See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.

リンクにマウスをホバーすると、アンダーラインがスライドして表示されるアニメーションです。

HTML:

<a href="#" class="underline-slide">Hover me!</a>

CSS:

.underline-slide {
  color: #333;
  text-decoration: none;
  position: relative;
}

.underline-slide::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #007BFF;
  transition: transform 0.3s ease;
  transform: scaleX(0);
  transform-origin: right;
}

.underline-slide:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

解説: ::after 擬似要素を使用して、リンクの下にアンダーラインを作成しています。ホバー時に transform プロパティを使ってスライドインさせることで、スタイリッシュなエフェクトを実現しています。

6. バックグラウンドカラーの拡張

See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.

ホバーすると、ボタン全体の背景色が拡張するアニメーションです。

HTML:

<a href="#" class="hover-bg-expand">Hover me!</a>

CSS:

.hover-bg-expand {
  display: inline-block;
  padding: 10px 20px;
  color: #007BFF;
  border: 2px solid #007BFF;
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
}

.hover-bg-expand::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #007BFF;
  z-index: -1;
  transition: transform 0.3s ease;
  transform: scaleX(0);
  transform-origin: right;
}

.hover-bg-expand:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.hover-bg-expand:hover {
  color: white;
}

解説: ::before 擬似要素を使って、背景色を拡張するアニメーションを作成しています。ホバー時に transform を利用して背景が右から左へスライドしてくるように見せることで、インパクトのある効果を演出しています。

4. 拡大ズームイン

画像やアイコンにホバーすると、ズームインするエフェクトです。

HTML:

htmlコードをコピーする<div class="zoom-in">
  <img src="https://via.placeholder.com/150" alt="Image">
</div>

CSS:

cssコードをコピーする.zoom-in {
  overflow: hidden;
  display: inline-block;
}

.zoom-in img {
  transition: transform 0.3s ease;
}

.zoom-in:hover img {
  transform: scale(1.2);
}

解説: ホバー時に transform: scale を利用して、画像がズームインするように見せています。シンプルでありながら、インタラクティブなエフェクトを実現できます。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

現在の時刻をサイトで表示する方法

次の記事

jQueryの人気プラグイン「Slick」を使ったスライダー