【すぐできる】BootstrapVueで作るナビゲーションバー(CSSアニメーション)

今回は【すぐできる】BootstrapVueで作るナビゲーションバー(CSSアニメーション)をご紹介。エフェクトがついてます。簡単です。動きます。オシャレなnavbarを作れます。レスポンシブ対応。Web制作に使える。htmlとcssだけ。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

こちらのアニメーション/エフェクトのコードはすべて完全オリジナルなのでコピペ大歓迎です。

この記事の目次

【すぐできる】BootstrapVueで作るナビゲーションバー(CSSアニメーション)

BootstrapVueの導入方法
アニメーション動作の確認
コードの確認
このアニメーションのポイント！

『なんと0円のプログラミングスクールで『近道する』という裏技があります』
＊2020年9月8日更新

ProEngineer(プログラマカレッジ)では完全無料でプログラミング講座を受講できます。しかも、プロの講師がいつでも質問に答えてくれる環境です。有料のスクールに通うと50万円以上かかるところでProEngineerなら0円という『神対応』。あなたがもしプログラミング初心者なら『エンジニアへの近道』として試してみるのが間違いナシです。

>>ProEngineer(プログラマカレッジ)を無料で受講する

【すぐできる】BootstrapVueで作るナビゲーションバー(CSSアニメーション)

まずはBootstrapVueの導入方法から説明していきます。
すでにインストール済みの方はアニメーション動作の確認からご覧ください

BootstrapVueの導入

BootstrapVueの導入がまだの方のために導入方法を説明します

とりあえず下記をコピペして環境を整えてください

main.js

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

ターミナル

npm install vue bootstrap-vue bootstrap

以上でBootstrapVueの導入は完了です

アニメーション動作の確認

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

実際の動きはこちら

コードの確認

  <div class="button-background">
    <!-- BootstrapVueからナビゲーションボタンを用意 -->
    <div class="button">
      <b-button variant="primary">Primary</b-button>
    </div>
    <div class="button">
      <b-button variant="success">Success</b-button>
    </div>
    <div class="button">
      <b-button variant="danger">Danger</b-button>
    </div>
  </div>

.button-background{
  /* flexboxで要素を真ん中に指定 */
  display: flex;
  /* 要素を中央に配置する指定 */
  justify-content:center;
  margin-top: 100px;
}
.button button {
  width:100%;
  height: 100%;
  border-radius: 3em;
}
.button{
  margin:1%;
  background:white;
  width:20%;
  height:24%;
  border:1px solid #d6d6d6;
  box-shadow:0 2px 3px 0px rgba(0,0,0,0.25);
  /* ボタンに丸みをつける */
  border-radius:3em;
  /* カーソルを離した際のアニメーションの速度調整 */
  transition:.2s all;
}
/* ナビゲーションをマウスオーバーした際のアニメーションの動きを指定 */
.button-background:hover .button{
  /* hoverしたボタン意外がぼやける */
  filter:blur(3px);
  /* 不透明度の指定 */
  opacity:.5;
  /* hoverしたボタン意外が少し小さくなる */
  transform: scale(.98);
  box-shadow:none;
}
.button-background:hover .button:hover{
  transform:scale(1);
  /* hoverしている要素のみぼやけない指定 */
  filter:blur(0px);
  /* 不透明度の指定 */
  opacity:1;
  /* hoverするとボタンが浮き出るように影を指定 */
  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
}

ここがポイント！