画像をギャラリー表示したり、あるいは一覧で表示したりする場合・・・画像にマウスがホバーしたら浮かび上がるようなアニメ効果を付けたいことってあると思います
ここではその画像を浮かび上がらせる方法とCSSコード例についてまとめました。
画像を浮かせるアニメ効果の付け方
画像に浮遊効果を付ける方法はそれほど難しくなく、
- box-shadowプロパティ
- transitionプロパティ
という２つのプロパティを使えば簡単にできます。これらのプロパティの詳しい説明は後で紹介するとして、そのやり方だけを説明するなら次のような手順です。
まず次のような専用のクラスが付いたimg要素を用意
|
1 |
<img class="float" src="example.jpg"> |
クラス名は何でもいいんですが、分かりやすく "float" というクラス名にしました。
そしてこのimg要素をホバー時に浮かせるCSS例は次の通り
|
1 2 3 4 5 6 |
img.float{ transition: box-shadow .5s; } img.float:hover{ box-shadow: 0 12px 12px gray; } |
何をしているかは後で紹介しますが、このCSSが適用された画像にマウスをホバーすると下方向に影が付いて浮かび上がるようにアニメーションするはずです。
ちなみに実際にサンプル画像でホバーしたときの様子がこちら
見てわかるようにマウスポインタが画像内に入った時点で浮かび上がるようになります。
あとスマホの場合はマウスポインタがないからアニメ効果がつかない、と思ってましたが画像を長押しした時点でホバー扱いになってアニメが開始するみたいです。
以上が画像ホバー時に浮かび上がらせるようなアニメ効果を付ける方法
ほんの数行のCSSを加えるだけで簡単にできます。ギャラリーなどで画像をお洒落に表示したいときに便利かもしれません。
CSSコードについて少し解説・・・
仕組みが分かっている人にとっては説明不要かもですが、一応どういう仕組みで画像を浮かび上がらせているか少し解説したいと思います。
まず初めに box-shadowプロパティ について
これは要素全体に影を付けるためのプロパティでCSS3から新たに追加されたもの。紹介したCSSコードでは次みたいに画像ホバー時に影を付けるのに使っています。
|
1 2 3 |
img.float:hover{ box-shadow: 0 12px 12px gray; } |
このプロパティに渡す値は１つめが左方向の影距離（左がマイナスで右がプラス）、２つめが上下方向の影距離（上がマイナスで右がプラス）、３つ目が影のぼかし半径、そして４つ目が影の色となっています。
上の例だと浮かんでいるのを分かりやすくするために下方向にしか影をつけませんでした。
影の距離とかぼかし具合については影っぽくなるように調整してください。ただし色については不自然にならないように灰色にした方が無難ですね。
そして次に transitionプロパティ について
これはCSS3から追加されたもので、あるプロパティを一定の時間だけ徐々に変化させていくためのプロパティになっています。紹介したCSSコードで使っているのが次の部分
|
1 2 3 |
img.float{ transition: box-shadow .5s; } |
ホバー前の画像に対してbox-shadowプロパティを0.5秒かけて変化させるように設定してます。
こうすることでホバーされたときにbox-shadowプロパティが徐々に変化していき、まるで浮かび上がっていくように見えるという訳です。
ちなみに transition は次みたいにコンマ（ , ）で区切れば２つ以上プロパティを指定することもできます。
|
1 2 |
/** ２つ以上のプロパティを指定 */ transition: box-shadow .5s, transform .5s; |
上の例は box-shadow と transform という２つのプロパティを遷移させているコード例。もし浮かび上がるだけでなく、それ以上に複雑なアニメ効果を付けたい場合はこういう書き方をしてください。
仕組みについて説明すると大体こんな感じ
jQueryとかのスクリプトも一切必要ありません。たった２つのプロパティを組み合わせるだけで簡単にアニメ効果がつけられるのはCSS3の便利な所ですね。
ここまでのまとめ
ここで紹介した方法はCSS3を使っているものの、モダンなブラウザなら対応済みなので互換性の心配はありません。手軽にアニメ効果を付けたいときはCSSを使うのが一番簡単です。
ちなみに同じ方法を使えば次記事みたいに文字を浮遊させる効果を付けることも可能
その詳しいやり方は上記事で紹介したので良ければご覧ください。
以上CSSを使って画像を浮かび上がらせる方法についてでした。
