Vueバージョン確認
npm list vue
まずは上記コマンドでバージョンの確認
twinzlabo@0.1.0 /Users/twinzlabo
── vue@2.6.11
BootstrapVueの導入
BootstrapVueの導入がまだの方のために念のため導入方法書いときますね
とりあえずコピペして環境を整えてください
importBootstrapVuefrom'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すると画像が１００倍強調される超動きのある画像一覧をコピペだけで作成
すでに上の方で確認してもらったかと思いますが、
何の変哲もないBootstrapVueのイメージコンポーネントにスタイル修正を行うことで
そのうちの１つの画像をhoverすると他の画像が透過し選択したイメージだけが宙に浮いたように超強調される
超クールなアニメーション実装をしていきましょう
デフォルトの上のイメージコンポーネントをhoverしたら下の画像のように
hoverした画像だけが浮いているように強調されます
この感じプロが作ったようにクールですよね
でもこれがコピペだけで作れるんです
実装してみたら感動すること間違いなしです！
では早速コードをコピペしていきましょう
<template>
<div class="do-animation pic-background">
<div class="pic">
<b-img src="https://source.unsplash.com/1000x800" fluid alt="Fluid image"></b-img>
</div>
<div class="pic">
<b-img src="https://source.unsplash.com/1000x801" fluid alt="Fluid image"></b-img>
</div>
<div class="pic">
<b-img src="https://source.unsplash.com/1000x802" fluid alt="Fluid image"></b-img>
</div>
<div class="pic">
<b-img src="https://source.unsplash.com/1000x803" fluid alt="Fluid image"></b-img>
</div>
<div class="pic">
<b-img src="https://source.unsplash.com/1000x804" fluid alt="Fluid image"></b-img>
</div>
<div class="pic">
<b-img src="https://source.unsplash.com/1000x805" fluid alt="Fluid image"></b-img>
</div>
</div>
</template>
<style>
.do-animation {
visibility: hidden;
}
.do-animation > * {
visibility: visible;
}
.do-animation > * {
transition: opacity 150ms linear 100ms, transform 150ms ease-in-out 100ms;
}
.do-animation:hover > * {
opacity: 0.4; transform: scale(0.9);
}
.do-animation > *:hover {
opacity: 1; transform: scale(1); transition-delay: 0ms, 0ms;
}
.pic-background{
align-items:center;
justify-content:center;
margin-left: 55px;
margin-top: 100px;
width:100%;
}
.pic img {
width:100%;
height: 100%;
}
.pic{
float: left;
margin:0%;
background:white;
width:29%;
height:250px;
border:1px solid #d6d6d6;
box-shadow:0 2px 3px 0px rgba(0,0,0,0.25);
transition:.2s all;
}
</style>
いかがでしたでしょうか？
BootstrapVueのイメージコンポーネントにスタイル修正を行うことで
そのうちの１つの画像をhoverすると他の画像が透過し選択したイメージだけが宙に浮いたように超強調される
超クールなアニメーション実装ができましたか？
あんなに個性のカケラも感じなかったBootstrapVueのイメージコンポーネントが
いとも簡単にプロが作ったようなデザインに一変しちゃいましたね！(自画自賛)
こういうの実装できるとめっちゃ興奮しますよね
こちらに他にも面白いアニメーション実装記事があるので参考までに
下の記事ではより応用的で面白いCSSアニメーションの作成方法を掲載しているので是非挑戦してみてください
以上です
より応用的で面白いCSSアニメーションの作成方法学びたい方にはこちらの記事がおすすめです
現役フロントエンドエンジニアがおすすめするコピペで使えるアニメーション記事まとめ１２選