【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

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

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

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

 

以上です

 


参考

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

ふたご


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

ふたご

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

 

   話だけ聞いてみる