BootstrapVueの使い方｜ナビゲーションバーでCSSアニメーション

※当サイトには一部宣伝が含まれます。

今回は【すぐできる】BootstrapVueで作るナビゲーションバー(CSSアニメーション)をご紹介いたします。

エフェクトがついているので動きます。しかもhtmlとcssのみで簡単に作れてWeb制作でも使えてしまうレスポンシブデザインのオシャレなnavbarとなっています。

動きを見ていただければ使いたくなること間違いなしです！

この記事の信頼性（ゆうけんブログの筆者はこんな人）

現役Webデザイナーが執筆
最高月収7桁超のフリーランス
完全未経験から独学でWeb制作スキルを習得
Twitterフォロワー数2,000人超（→@twinzvlog_yk）
Web制作のメンター経験多数
認定ランサー（ランサーズ最高ランク）

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

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

【すぐできる】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);
}

ここがポイント！