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

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

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

この記事の目次

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

  1. BootstrapVueの導入方法
  2. アニメーション動作の確認
  3. コードの確認
  4. このアニメーションのポイント!

 

【すぐできる】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);
}
ここがポイント!
  1. BootstrapVueからナビゲーションボタンを用意
  2. flexboxで横並びで中央に配置(justify-content:center)
  3. 各々のwidth, heightを%表記としレスポンシブ対応
  4. hover前後のtransform: scaleを調整することでボタンが拡大・縮小
  5. hover前後のfilter:blur(ぼやけ)を調整しhoverされたボタンのみを強調
  6. transitionで滑らかなアニメーションを実現

参考

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

ふたご


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

ふたご

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

 

   話だけ聞いてみる