【解説あり】cssだけでclipアニメーション付きナビゲーションバー3選(サンプル)

今回は【解説あり】cssだけでclipアニメーション付きナビゲーションバー3選(サンプル)をご紹介。シンプルかつ洗練されたデザイン。それぞれ違うエフェクトと滑らかな動き。Web制作で使える。ポートフォリオにも最適。コピペOK。HTML, CSSだけ
動きを見ていただければ使いたくなること間違いなしです!

コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。

 

1. 左から文字の色が変化するclipアニメーション付きナビゲーションバー

動きは下の画像のような感じになります

コードを見る
  <div class="nav">
    <!-- 各ナビゲーション要素を用意 -->
    <ul>
      <li><a href="#" data-content="Home">Home</a></li>
      <li><a href="#" data-content="About">About</a></li>
      <li><a href="#" data-content="Contact">Contact</a></li>
      <li><a href="#" data-content="Blog">Blog</a></li>
    </ul>
  </div>
ul {
  background: #fff;
  /* flexboxでナビゲーション要素を横並びに指定 */
  display: flex;
  /* ナビゲーション要素を一定間隔で均等に配置 */
  justify-content: space-around;
  width: 75%;
  margin: auto;
  padding-left: 0;
  padding-top:100px;
}
li {
  list-style: none;
  font-size: 18px;
  font-weight: 500;
  /* テキストを全て大文字に変換 */
  text-transform: uppercase;
  /* 文字間隔の調整 */
  letter-spacing: 4px;
}
.nav ul li a {
  color: #444;
  /* デフォルトのダサすぎる装飾を削除 */
  text-decoration: none;
  /* 相対的位置指定 */
  position: relative;
}
.nav ul li a:hover:before {
  /* 切り抜き指定 */
  clip: rect(0, 190px, 190px, 0);
}
.nav ul li a:before {
  /* 絶対的位置指定 */
  position: absolute;
  /* hover後に表示される文字の位置指定 */
  left: 0;
  top: -10;
  /* 選択された要素の属性の値を受け取りスタイルを指定 */
  content: attr(data-content);
  display: inline-block;
  color: pink;
  width: 100%;
  /* 切り抜き指定 */
  clip: rect(0, 0, 10px, 0);
  /* アニメーションの速度指定 */
  transition: 600ms;
}
ここがポイント!
  1. flexboxのjustify-content: space-aroundでナビゲーションボタンを一定間隔で均等に中央配置
  2. a:beforeにposition:absoluteを指定しclipプロパティを使用する準備OK
  3. a:beforeのhover前後にclipにてナビゲーションバー要素を切り抜く
  4. clipで切り抜いた部分にcontent: attr(data-content)にて選択された要素の属性値を受け取りスタイルを指定(今回の場合、ピンク色の文字がナビゲーションメニューに重なるイメージ)
  5. 各transitionプロパティをhover後に指定することで滑らかなアニメーションを実現

 

2. フワッと滑らかに文字色が変化するclipアニメーション付きナビゲーションバー

動きは下の画像のような感じになります

コードを見る
  <div class="nav">
    <!-- 各ナビゲーション要素を用意 -->
    <ul>
      <li><a href="#" data-content="Home">Home</a></li>
      <li><a href="#" data-content="About">About</a></li>
      <li><a href="#" data-content="Contact">Contact</a></li>
      <li><a href="#" data-content="Blog">Blog</a></li>
    </ul>
  </div>
ul {
  background: #fff;
  /* flexboxでナビゲーション要素を横並びに指定 */
  display: flex;
  /* ナビゲーション要素を一定間隔で均等に配置 */
  justify-content: space-around;
  width: 75%;
  margin: auto;
  padding-left: 0;
  padding-top:100px;
}
li {
  list-style: none;
  font-size: 18px;
  font-weight: 500;
  /* テキストを全て大文字に変換 */
  text-transform: uppercase;
  /* 文字間隔の調整 */
  letter-spacing: 4px;
}
.nav ul li a {
  color: #444;
  /* デフォルトのダサすぎる装飾を削除 */
  text-decoration: none;
  /* 相対的位置指定 */
  position: relative;
}
.nav ul li a:hover:before {
  /* 切り抜き指定 */
  clip: rect(0, 190px, 190px, 0);
}
.nav ul li a:before {
  /* 絶対的位置指定 */
  position: absolute;
  /* hover後に表示される文字の位置指定 */
  left: 0;
  top: -10;
  /* 選択された要素の属性の値を受け取りスタイルを指定 */
  content: attr(data-content);
  display: inline-block;
  color: pink;
  width: 100%;
  /* 切り抜き指定 */
  clip: rect(20px, 20px, 20px, 40px);
  /* アニメーションの速度指定 */
  transition: 500ms;
}
ここがポイント!
  1. flexboxのjustify-content: space-aroundでナビゲーションボタンを一定間隔で均等に中央配置
  2. a:beforeにposition:absoluteを指定しclipプロパティを使用する準備OK
  3. a:beforeのhover前後にclipにてナビゲーションバー要素を切り抜く
  4. clipで切り抜いた部分にcontent: attr(data-content)にて選択された要素の属性値を受け取りスタイルを指定(今回の場合、ピンク色の文字がナビゲーションメニューに重なるイメージ)
  5. 各transitionプロパティをhover後に指定することで滑らかなアニメーションを実現

 

3. 文字色が一瞬だけ変化するclipアニメーション付きナビゲーションバー

動きは下の画像のような感じになります

コードを見る
  <div class="nav">
    <!-- 各ナビゲーション要素を用意 -->
    <ul>
      <li><a href="#" data-content="Home">Home</a></li>
      <li><a href="#" data-content="About">About</a></li>
      <li><a href="#" data-content="Contact">Contact</a></li>
      <li><a href="#" data-content="Blog">Blog</a></li>
    </ul>
  </div>
ul {
  background: #fff;
  /* flexboxでナビゲーション要素を横並びに指定 */
  display: flex;
  /* ナビゲーション要素を一定間隔で均等に配置 */
  justify-content: space-around;
  width: 75%;
  margin: auto;
  padding-left: 0;
  padding-top:100px;
}
li {
  list-style: none;
  font-size: 18px;
  font-weight: 500;
  /* テキストを全て大文字に変換 */
  text-transform: uppercase;
  /* 文字間隔の調整 */
  letter-spacing: 4px;
}
.nav ul li a {
  color: #444;
  /* デフォルトのダサすぎる装飾を削除 */
  text-decoration: none;
  /* 相対的位置指定 */
  position: relative;
}
.nav ul li a:hover:before {
  /* 切り抜き指定 */
  clip: rect(0, 400px, 190px, 120px);
}
.nav ul li a:before {
  /* 絶対的位置指定 */
  position: absolute;
  /* hover後に表示される文字の位置指定 */
  left: 0;
  top: -10;
  /* 選択された要素の属性の値を受け取りスタイルを指定 */
  content: attr(data-content);
  display: inline-block;
  color: pink;
  width: 100%;
  /* 切り抜き指定 */
  clip: rect(0, 0, 10px, 0);
  /* アニメーションの速度指定 */
  transition: 800ms;
}
ここがポイント!
  1. flexboxのjustify-content: space-aroundでナビゲーションボタンを一定間隔で均等に中央配置
  2. a:beforeにposition:absoluteを指定しclipプロパティを使用する準備OK
  3. a:beforeのhover前後にclipにてナビゲーションバー要素を切り抜く
  4. clipで切り抜いた部分にcontent: attr(data-content)にて選択された要素の属性値を受け取りスタイルを指定(今回の場合、ピンク色の文字がナビゲーションメニューに重なるイメージ)
  5. 各transitionプロパティをhover後に指定することで滑らかなアニメーションを実現

参考

そもそもWebデザインの基礎がわからない。。
そんなあなたにはこれ!

ふたご


でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたにはこれ!

ふたご

完全無料で一人前のエンジニアになれるプログラミングスクールあります
  1. プログラミング学習&サポートが無料!
  2. 誰もが知っている超優良企業への就職サポート付き!
  3. 学習言語:Java、PHP、HTML、CSSなど

 

   話だけ聞いてみる