BLOG ブログ

> ブログ

こんにちは!WEBデザイナーのこたです。

画像にマウスホバーした際の効果っていろいろあると思います。
色を変えたり、画像を大きくしたり、透明度を変えたり。
そこでtransitionプロパティを使うことで、少し複雑な動きもつけることができます。

今回はtransitionを使った2つの効果をご紹介いたします。

画像にホバーしたときに浮き上がる効果をつける

cubic-bezier(x1,y1,x2,y2)

See the Pen
BaWRMVG
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

マウスポインタが画像にホバーしたときに、浮き上がる効果をつけます。
具体的には、画像を拡大して回転させ、ドロップシャドウをつけます。
その際にトランジションをかけますが、今回は、イーズインでもイーズアウトでもなく、独自に設定したイージングを適用して、一度目標を通り過ぎて戻ってくるような効果をつけてみます。

イージングの効果は「ベジュ曲線」で理解しよう


独自に設定したイージングを適用するには、transitionプロパティの値にcubic-bezier()を使用します。
実は、イージングの速度の変化は、横軸を「時間」、縦軸「目標(変化後の状態)までの進捗率」とするグラフの曲線で表されています。
この曲線は「ベジュ曲線」という、数学的な式で描かれた曲線です。
Adobe Illustratorなどのドローイングアプリケーションを使ったことがある方は、名前くらいは聞いたことがあるかもしれないですね。

ベジュ曲線がわかりやすい役立つWebサイト


cubic-bezier()の内には、このグラフの曲線を描くための4つの数値
ハンドルの位置を表すx1,x2,y2をカンマで区切って指定します。

ただ、このグラフの意味はなかなかわかりづらいですよね。

そこで紹介するのは「cubic-bezier.com」です。
左のグラフから伸びているハンドルをドラッグすると、イージングの設定に使える数値を自動的に算出してくれます。
cubuic-bezierプロパティの部分をコピーすれば、そのままtransitionプロパティの値として使えます!

画像にホバーしたときに裏返す効果をつける

rotateY(角度)

See the Pen
qBrmvdp
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

先ほどは平面的な2次元トランスフォームを扱いましたが、こちらは立体的な3次元トランスフォームを紹介します。
3次元トランスフォームでは、2次元トランスフォームのx軸(横方向)とy軸(縦方向)に加え、奥行きのz軸を含めた「3次元空間」の変形をします。
今回はy軸を中心軸として、要素のコンテンツを1/2回転させています。

まとめ

今回は「画像ホバーしたときに浮き上がる・裏返す効果をつける」方法にてご紹介しました。
そのついでで2次元トランスフォーム、3次元トランスフォームについても軽く説明いたしました。
難しく見えますが、全部を覚える必要はないので、必要なときに調べるだけでもいいと思います。