CSS/JSで作れるクリエイティブなホバーアニメーション10選

インタラクティブな要素をWebサイトに追加したいなら、ホバーアニメーションがおすすめです。簡単に取り入れられるホバーアニメーションは、デザイナーたちにさまざまな方法で活用されてきました。

もっともベーシックな用途はテキストリンクやボタンの強調効果としてですが、最近はもっと大胆にホバーアニメーションを取り入れた例もあります。

ホバーアニメーションと相性がいいのは、なんといっても画像です。大小どんな画像でも、ホバーアニメーションを活用すれば印象的な効果を加えられます。

今回は、クリエイティブなホバーアニメーションのコードスニペットを10個ご紹介します。

1. ドラマチックな二重レイヤー

See the Pen Photo effects on hover using JS and CSS3 by Alvaro Montoro (@alvaromontoro) on CodePen.

CSSとJavaScriptを活用して画像を複製して二重にし、CSSフィルターをそれぞれに適用することにより、被写体が浮き上がってくるようなドラマチックな演出が可能です。

2. 画像に色彩を

See the Pen Image Hover Effects by kw7oe (@kw7oe) on CodePen.

ホバーアニメーションが優れている大きな理由は、ユーザーにすばやく効果を体験させられることです。その中でも注目すべきなのが、ホバーするとセピアやグレースケールの画像がフルカラーになる、CSS3のフィルター。瞬間的な変化でユーザーの注目を集めます。

3. テレビ番組のようなキャプション

See the Pen #1104 – Image hover with slide out title by LittleSnippets.net (@littlesnippets) on CodePen.

斜めにデザインされたキャプション、シャープなタイポグラフィ、そしてすばやいアニメーションという三つ要素を組み合わせると、テレビ番組のオープニングのような印象に。作業の大部分はCSSのみです。

4. カードを広げる

See the Pen Image Hover Effect – CSS3 by Bruno Rodrigues (@itbruno) on CodePen.

フォトギャラリーにおすすめしたいのが、トランプのようにカードが広がるホバーアニメーション。洗練された印象を与えます。

5. 写真を四方に動かす

See the Pen Image Hover Effect by Dimitra Vasilopoulou (@mimikos) on CodePen.

説明よりも、まずは実際に上の例で遊んでみましょう。建物の任意の場所にカーソルを合わせると、カーソルの移動方向に基づいてブロックがシフト・スクロールします。繊細でびっくりするような効果は、ユーザーを夢中にさせるはずです。

6. バラバラの写真をまとめる

See the Pen Split Image | Hover Effect by Dimitra Vasilopoulou (@mimikos) on CodePen.

もうひとつおもしろいホバーアニメーションをご紹介します。先述の「写真を四方に動かす」例と同じDimitra Vasilopoulouの作品です。こちらは先ほどの例とは逆で、バラバラになっている写真の上にカーソルを合わせると、写真がもとのかたちに戻ります。びっくりするような効果ではありませんが、印象に残ります。

7. CSSのみでも強烈な印象を

See the Pen Awesome Image Hover in Pure CSS by MAHESH AMBURE (@maheshambure21) on CodePen.

このホバーアニメーションのコレクションは、過度な効果なしでもユーザーに強烈な印象を与えられることを証明しています。さまざまなスタイルオプションがあり、ホバー時にはそれぞれにテキストコンテンツとフィルターが適用されます。また、これらはすべてJavaScriptを使わず、CSSのみで製作されています。

8. ポップでなめらかな画像変化

See the Pen Animation @keyframes in Image Hovers by Vail Joy (@vailjoy) on CodePen.

セピア調の動物のイラストレーションがフルカラーへ。ポップでなめらかに変化するこのホバーアニメーションは、CSSのシャッター効果、キーフレーム、擬似要素、透明度の変化で構成されています。

9. 9枚に分裂する写真

See the Pen Splitting: Image Hover Gallery by Shaw (@shshaw) on CodePen.

フォトギャラリーは広く普及していますが、ユニークな例はそう多くはありません。このフォトギャラリーは、サムネイルにカーソルを合わせると、画像が9枚に分裂しながら拡大します。そして、小さくなるときにも画像が9枚に分裂してからサムネイルに戻ります。

10. 画像をバラバラにする

See the Pen Fancy Image Splitting (SplittingJS) by flowuhh (@flowuhh) on CodePen.

画像のうしろに配置した文字を見せるにあたって、画像をバラバラにするというユニークなアイデアが使われています。すこし動きが複雑なので、同じページで繰り返し使いたいと思うようなホバーアニメーションではないかもしれません。しかし適切に実装できれば、独創的な印象を与えられるはずです。

おわりに

ホバーアニメーションをWebサイトに加えれば、ユーザーの目をひくことは間違いありません。大切なのは派手な効果ではなく、スムーズなトランジションや特殊効果です。

今回ご紹介したアイデアからインスピレーションを得たなら、ぜひWebサイトにオリジナルのホバーアニメーションを加えてみてください。CSSだけでも、魅力的なホバーアニメーションを作れるはずです。

（原文： Eric Karkovack　翻訳：Asuka Nakajima）

あわせて読みたい！▼