BootstrapVueのCardにCSSアニメーションをつける方法(filterエフェクト)

今回はBootstrapVueのCardにCSSアニメーションをつける方法(filterエフェクト)をご紹介。filterプロパティ(blur saturate contrast)でエフェクトがついてます。簡単です。動きます。オシャレなカードを作れます。
htmlとcssだけしか使っていません。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

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

この記事の目次

BootstrapVueのCardにCSSアニメーションをつける方法(マテリアルデザイン)

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

 

1.  【徹底解説】height calcで滑らかな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="container py-1">
    <div class="row pb-8 mb-8">
        <!-- 要素の配置大きさ -->
        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
            <!-- カードの枠組み -->
            <div class="card rounded shadow-sm border-1">
                <div class="card-body p-8"><img src="https://source.unsplash.com/1000x800" alt="" class="img-fluid d-block mx-auto mb-4">
                    <h5>What is it ?</h5>
                    <p class="small text-muted font-italic">
                      This Photo Is Displayed Randomly.<br>Is This Cool ?<br>What Do you Think ?
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
/* 画像のスタイル指定 */
img {
  /* hover前のぼやけ度合い・彩度・コントラストの調整 */
  filter: blur(3px) saturate(100%) contrast(100%);
  /* アニメーションの速度調整 */
  transition: .5s;
}
/* hover後の画像のスタイル指定 */
img:hover {
  /* hover前のぼやけ度合い・彩度・コントラストの調整 */
  filter: blur(0) saturate(120%) contrast(120%);
  /* アニメーションの速度調整 */
  transition: .5s;
}
ここがポイント!
  1. BootstrapVueの公式サイトからカードのコードをコピペ
  2. 配置やサイズなどを調整
  3. imgタグに対してhover前後のスタイルを指定
  4. hover前後のfilter: blur() saturate() contrast()でぼやけ度合い・彩度・コントラストの調整
  5.  transitionで滑らかなアニメーションを実現

参考

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

ふたご


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

ふたご

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

 

   話だけ聞いてみる