【Vueデザイン/コピペだけ】白黒画像一覧でhoverすると色がつくCSSアニメーション実装

Vueバージョン確認

npm list vue

まずは上記コマンドでバージョンの確認

twinzlabo@0.1.0 /Users/twinzlabo

── vue@2.6.11

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の導入は完了です

白黒画像一覧でhoverすると色がつくCSSアニメーション実装

すでに上の方で確認してもらったかと思いますが、

BootstrapVueの非常にダサいImageコンポーネントをスタイル修正を行うことでクールなデザインに編集していきましょう

デフォルトの上の画像をhoverしたら下の画像のように色がつくようにカスタマイズしていきます

この感じなかなかクールですよね

では早速コードをコピペしていきましょう

template

<template>
  <b-container>
    <b-row>
      <b-col>
        <div v-for="(item, i) in items" class="images" :key="i">
          <b-img thumbnail fluid :src="item.imageUrl"></b-img>
        </div>
      </b-col>
    </b-row>
  </b-container>
</template>

script

<script>
export default {
  data () {
    return {
      items: [
        { imageUrl: require('@/assets/images/1.png') },
        { imageUrl: require('@/assets/images/2.png') },
        { imageUrl: require('@/assets/images/3.png') },
        { imageUrl: require('@/assets/images/4.png') }
      ]
    }
  }
}
</script>

style

<style scoped>
.col {
  height: 100%;
}
.images {
  margin: 0 auto;
  width: 50%;
  float: left;
  height: 150px;
  position: relative;
}

.col img {
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 0;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: all 200ms ease-in;
  filter: grayscale(1) opacity(.8);
}

.col img:hover {
  filter: grayscale(0) opacity(1);
}
</style>

これだけです

いかがでしたでしょうか？ちゃんと同じようなデザインになりましたか？

あと念のため言っておきますが

@/assets/images/1.png
@/assets/images/2.png
@/assets/images/3.png
@/assets/images/4.png

これらを

 <div v-for="(item, i) in items" class="images" :key="i"> 
 <b-img thumbnail fluid :src="item.imageUrl"></b-img>  </div>

この中に入れるためにファイルを予め用意してください

そうでないと当然ですがエラーがおきます

つまり、

assets
  images
    1.png
    2.png
    3.png
    4.png

上記のようなフォルダ構造にしてください

こちらに他にも面白いアニメーション実装記事があるので参考までに

下の記事では他の魅力的なアニメーションの作成方法を掲載しているので是非挑戦してみてください

以上です

参考