こんにちは朱夏です。
前回の続きを解説していこうと思います。
解説しているマウスホバーのエフェクトはこちらです。
-
- 拡大+透過調整
- 拡大のみ
- 拡大+グレースケール
- 縦回転出現
- 拡大+階調反転
- 拡大+ブラー
今回は、後半3つの解説をしていきます。
正確には縦軸回転出現でしたねすみません。
コードはこちらです。
<div class="card m-1 card04">
<img class="card-img-top cardimg4" src="img/S__25821192.jpg" alt="住宅街">
<div class="card-body bg-light">
<p class="card-text">住宅街の写真です。青空が綺麗だったので。</p>
<p class="card-text">■縦回転出現</p>
</div>
</div>
CSSはこちらです。
.card04 > .cardimg4 {
max-width: 500px;
height: 300px;
object-fit: cover;
transition: 0.5s;
transform: rotate3d(0,1,0,-90deg);
}
.card04:hover > .cardimg4 {
transform: scale(1.2) rotate3d(0,1,0,0deg);
}
ここは今回の頑張りポイントでした。
先ずはそれぞれの状態を説明します。
通常状態：Y軸で-90度回転した状態
ホバー状態：1.2倍の大きさに拡大、Y軸で0度まで回転
Y軸で-90度回転した状態は、コピー用紙を画像と見立てると、横の側面を見てるような状態です。
なので、厚みが0の電子画像の場合だと完全に見えなくなります。
これをホバー状態の時は0度まで回転させる(通常の表示角度にする)ことで、この動きを作っています。
そして、この視覚効果で拡大をつけてもあまり意味はないなと思いました。反省(；・∀・)
先ずはコードからどうぞ。
<div class="card m-1 card05">
<img class="card-img-top cardimg5" src="img/S__25821191.jpg" alt="近所">
<div class="card-body bg-light">
<p class="card-text">とてもいい天気だった近所の写真です。</p>
<p class="card-text">■拡大+階調反転</p>
</div>
</div>
CSSです。
.card05 > .cardimg5 {
max-width: 500px;
height: 300px;
object-fit: cover;
transition: 0.5s;
filter: invert(100%);
}
.card05:hover > .cardimg5 {
transform: scale(1.2);
filter: invert(0%);
}
こちらは、グレースケールと同じfilterで効果をつけています。
今回指定している効果はfilter: invert(100%);です。
これをホバーした時に0%にして効果を解除しています。
通常の状態では見た目がちょっと気持ち悪いくらいのインパクトですが、ホバーした時の動きはいい感じかなとも思います。
見た目をボヤっとさせる効果を付けるブラーです。
先ずはコードをどうぞ。
<div class="card m-1 card06">
<img class="card-img-top cardimg6" src="img/S__25821190.jpg" alt="大池山荘">
<div class="card-body bg-light">
<p class="card-text">初登山のキャンプ地、大池山荘です。</p>
<p class="card-text">■拡大+ブラー</p>
</div>
</div>
CSSです。
.card06 > .cardimg6 {
width: 500px;
height: 300px;
object-fit: cover;
transition: 0.5s;
filter: blur(5px);
}
.card06:hover > .cardimg6 {
transform: scale(1.2);
filter: blur(0);
}
ブラーはピクセル数でぼかしの大きさを指定します。
今回は5pxで指定しています。
ブラーは使われているサイトも結構あると思うので、今後もお世話になりそうな予感がします。
というわけで、2回に分けて視覚効果の動きとコードの内容を解説してみました。
色々試して思ったのですが、凝ったものを時間をかけて実装するよりも、一般的に使われている効果を短時間で実装していく方がコスパいいかもしれません。
とすると、拡大、ブラー、透過、グレースケール辺りとその組み合わせくらいができれば割と汎用性が高く対応できる気がしています。
仕事を受注して実装するのにあまり派手な視覚効果は必要ないのかもです。
それでは、今回はここまでです。
次回もよろしくお願いします。