普段からユーザーが何気なく利用しているホバーエフェクトやマウスクリックを、CSSアニメーションを使ってより魅力的に表現してみませんか。動きに目が奪われるアニメーションエフェクトは、デザイン的な見た目だけでなく、画像やハイパーリンクのクリックしやすさなど、ユーザビリティや操作性を大幅に改善することができます。
今回は、ユーザーの印象に残る効果的なホバーエフェクト用HTML/CSSスニペットをまとめてご紹介します。
HTML/CSSのみでスタイリングされたスニペットも多く、自由にカスタマイズできるだけでなく、コピペでサイトに利用することも可能です。ユーザーのハートをがっちり掴むエフェクトを、今後のプロジェクトに活かしてみてはいかがでしょう。
CSSで実現！目を奪われる素敵ホバーエフェクト用HTMLスニペット32個まとめ
特にウェブサイトで利用されることの多いボタン用ホバーエフェクトは、魅力的なアニメーションをCSSスタイリングで実現し、13種類のスタイルが揃います。
See the Pen Button Hover Effects by Kyle Brumm (@kjbrum) on CodePen.
ハイパーリンクにマウスカーソルを合わせると、長方形を描くアニメーションによってボタンスタイルに変形します。
See the Pen Button Hover Draw – CSS Only by Luke Meyrick (@lukemeyrick) on CodePen.
Beautiful Navigation Hover Effects
通常シンプルなつくりの多いナビゲーションも、ホバーエフェクトを加えることで見た目や使いやすさが格段にアップします。ここでは、4種類の効果的なナビメニュースタイルが披露されています。
See the Pen Beautiful navigation hover effects by Mahesh (@maheshambure21) on CodePen.
ナビゲーションメニューだけでなく、コンテンツ内のハイパーリンク用ホバーエフェクトにも適した、20種類のアニメーションがそれぞれ用意されています。
See the Pen CSS animations for links by Stas Melnikov (@melnik909) on CodePen.
ハイパーリンクにカーソルを合わせるときと外すときで、異なるラインカラーをアニメーション付きで変化させるテクニック。
See the Pen Nice line movement by Bruno Almeida (@brunob182) on CodePen.
アンダーラインの太さを調整することで、よりハイパーリンクを分かりやすく、クリックしやすくしたホバエフェクトテクニックのひとつ。
See the Pen Wired Link Mixin by Thomas Vaeth (@thomasvaeth) on CodePen.
Imagehover.css – An Image Hover CSS Library
多彩なアニメーションが特長の画像ホバーCSSライブラリで、40種類のスタイルが19KBで表現された実践向き素材集。
See the Pen Imagehover.css – An Image Hover CSS Library by LittleSnippets.net (@littlesnippets) on CodePen.
画像ホバーエフェクトをなんと63種類をまとめて用意したアニメーション用サンプル集。CSSで表現されているので、コピペも自由自在に行うことができます。
See the Pen image hover 63 effects by Mahesh (@maheshambure21) on CodePen.
CSSのみで実装された画像ホバーエフェクトサンプル集で、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類が収録されています。
See the Pen demo:CSS image hover effects by Naoya (@nxworld) on CodePen.
写真を多く利用するギャラリー向けサムネイルなどに採用したいホバーエフェクトで、マウスカーソルに合わせたユニークな動きを表現します。
See the Pen Hover effects with CSS3 by Jacob (@JacobStone) on CodePen.
画面中央に表示されているロゴにマウスカーソルを合わせることで、背景からぼんやりとカードが立体的に浮かび上がるホバーエフェクト。
See the Pen Card effect by Alex Moore (@MoorLex) on CodePen.
サムネイルにカーソルを合わせることで、ふわりと浮かせながら背後に点線ラインを表示するホバーアニメーションが素敵です。
See the Pen Hover effect – Pure CSS by Håvard Brynjulfsen (@havardob) on CodePen.
あらゆるウェッブサイトのコンテンツに活用しやすい、3スタイルのカード型ホバーエフェクトを用意したサンプル集。
See the Pen Card hover effects by Jason Hee (@jasonheecs) on CodePen.
Googleのマテリアルデザインに採用されているドロップシャドウ、ホバーエフェクトをCSSで完全再現しており、いざという時にも便利です。
See the Pen Material Design Box Shadows by Samuel Thornton (@sdthornton) on CodePen.
Direction Aware 3D Hover Effect
サムネイルにマウスカーソルを合わせる方向に合わせて、ホバーエフェクトの展開方法が変化するコンセプトデザイン。
See the Pen Direction-aware 3D hover effect (Concept) by Noel Delgado (@noeldelgado) on CodePen.
モダンブラウザでの表示にも対応したツールチップ用ホバーエフェクト。各アングルへの表示をフェードアウト付アニメーションで調整しています。
See the Pen Info on Hover by Ty Strong (@tystrong) on CodePen.
各種ハイパーリンクにカーソルを合わせると、サムネイルプレビューを横に表示してくれるホバーエフェクト。
See the Pen [Minimal Series] Presskit Download page by Daan (@danoszz) on CodePen.
マウスカーソルの動きに合わせてグリグリとサムネイルを立体的に動かすことができるホバーエフェクト。
See the Pen Attract hover effect by Louis Hoebregts (@Mamboleoo) on CodePen.
丸いシェイプが特長のサムネイルにマウスホバーすることで、イラストが左から右に動き出すアニメーションテクニック。
See the Pen CSS Parallax Orbs by Jamie Coulter (@jcoulterdesign) on CodePen.
マウスホバーすることで、カード型レイアウトが立体的に垂直方向にアニメーション展開するテクニック。
See the Pen cube service box by RahulDhiman (@rahuldhiman) on CodePen.
CSS Button Hover Effects with FontAwesome
ボタンにマウスカーソルを合わせることで、隠れていたアイコンをアニメーション付で表示するホバーエフェクトテクニック。さりげないデザインのアクセントにいかがでしょう。
See the Pen CSS3 Button Hover Effects with FontAwesome by fox_hover (@fox_hover) on CodePen.
ボタンにカーソルを合わせることで、各種SNSアイコンがスライドアニメーションで表示されます。
See the Pen Daily UI #010: Social Share by Fabio Ottaviani (@supah) on CodePen.
右下隅に配置されたアイコンをクリックすると、ペロッとめくれた様子をCSSで再現できます。
See the Pen Corner Share by Nathaniel Watson (@nw) on CodePen.
ハートマークをクリックするホバーエフェクトを、パラパラ漫画のようなCSSテクニックで披露しています。
See the Pen Twitter Heart by Donovan Hutchinson (@donovanh) on CodePen.
あまりカスタマイズされる機会も少ないコンテンツのページ送りにも、ホバーエフェクトを使って魅力的に仕上げることができます。
See the Pen Infinite Pagination by Mariusz Dabrowski (@MarioD) on CodePen.
CSS Overlay Navigation Animation
左上隅のハンバーガーメニューをクリックすると、フルスクリーンでナビメニューが展開するホバーエフェクト。CSS Keyframe を利用することで、なめらかな開閉アニメーションを表現しています。
See the Pen CSS Overlay Navigation Animation by Ryan Mulligan (@hexagoncircle) on CodePen.
CSSのみで表現できるシンプルなエフェクトで、クリックするとふわりと半透明のフレアがと飛び出します。
See the Pen Pure CSS Click Effect by Dylan (@doggard) on CodePen.
バッチ型アイコンをつかったデザインに追加したい、インタラクティブなホバーアニメーション16種類が一式揃います。
See the Pen CSS3 Hover Effects by honglio (@honglio) on CodePen.
CSSとSVGを駆使し、70行程のコードによって表現された、泡のようなアニメーションが素敵なボタン用ホバーエフェクト。
See the Pen Mana Button by Dean Hidri (@visualcookie) on CodePen.
10 Stunning Hover Effects with SCSS
文字テキストにさまざまなCSSアニメーションエフェクトを加える、10種類のユニークなホバースタイルが揃います。
See the Pen 10 stunning hover effects with scss by Renan C. Araujo (@caraujo) on CodePen.
10 Stylish Hover Effects with LESS
こちらも文字テキスト用ホバーエフェクト10種類セットで、各単語フレーズに関連するアニメーションがそれぞれ用意されています。
See the Pen 10 stylish hover effects with less by Renan C. Araujo (@caraujo) on CodePen.
電話がジリジリとなっている様子や、はがきが送信される様子などをオリジナルのCSSアニメーションとアイコンフォントで演出できるテクニック。
See the Pen Sullivan Buttons by David Darnes (@daviddarnes) on CodePen.
ホバーエフェクトで迷ったらここ！膨大なコレクションを公開している LittleSnippets
よりオリジナル性の強いホバーエフェクトを探しているときは、LittleSnippetsを覗いてみてはいかがでしょう。画像やボタン、文字テキスト用ホバーエフェクトを中心に、インタラクティブな動きを演出したHTMLスニペットが400種類以上揃っています。以下は、同サイトで公開されているいくつかのサンプル例となります。
See the Pen #1585 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.
See the Pen #1571 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.
See the Pen #1563 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.
See the Pen #1561 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.
See the Pen #1556 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.
See the Pen #1527 – News Card by LittleSnippets.net (@littlesnippets) on CodePen.
See the Pen #1584 – Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.
参照元リンク : 10 Custom Hover & Click Effects With CSS & JavaScript – Speckyboy.com
