ホバー & クリック効果用の 10 個のカスタム CSS & JavaScript スニペット

公開: 2021-03-05

開発者は、ホバーやマウスクリックなどの単純なユーザーアクションでクレイジーな効果を作成できます。これらは主にデスクトップユーザーに関連していますが、モバイル Web はほとんどのブラウザーでクリック/タッチ効果もサポートしています。

自分のプロジェクトで複製するためのクールなアイデアを探しているなら、このコレクションはきっとあなたにぴったりのものです。 JavaScript と CSS を少し知っている人なら誰でも、これらの効果を簡単に微調整して、任意のブラウザー、任意の Web サイトで機能し、レイアウトのエクスペリエンスを向上させることができます。

ボタンホバー効果

アニメーション効果の明らかな出発点は CSS ボタンです。これらは多くの対話性を処理するため、日常の使用において最も実用的です。 CTA ボタンは実質的に注目を集めており、これらのホバー効果を使用すると、さらに迅速に注目を集めることができます。

各効果は、アニメーションに純粋な CSS を使用します。これらのボタンのいくつかは、マウスオーバーイベントを JavaScript に依存していますが、すべてのアニメーションは CSS で直接制御されています。

フラットレイアウトをデザインしている場合、これらのアニメーションは非常に簡単に操作できます。

ナビホバー

このペンには、いくつかのナビゲーションホバーイベントがあります。これらは、異なるホバー効果で各ハイパーリンクを制御する純粋な CSS に依存しています。

通常、ナビゲーションメニューは非常にシンプルで汎用的です。そのため、ホバーイベントはデザインにスパイスを加え、訪問者に細部への気遣いを示すことができます。

これらのアニメーションのほとんどは、どの Web サイトにも適合するほど十分に飼いならされているため、簡単にコピーして任意のレイアウトに貼り付けるのに最適です。

写真ホバー効果

退屈な字幕があり、実際のコンテキストがない写真ギャラリーをどのくらいの頻度で見つけますか? 私はこれらをあまりにも頻繁に見ていますが、彼らはただ怠け者だと感じています.

シンプルなサムネイルギャラリーに依存するこれらの写真効果が本当に気に入っています。画像にカーソルを合わせると、写真のタイトル、説明、[続きを読む] ボタンが表示されます。

各要素はさまざまな角度からスライドして表示され、この画像ギャラリーがページからすぐに飛び出すのに役立ちます.

CSS ツールチップホバー

すべてのブラウザはデフォルトのツールチップをサポートしていますが、プラグインを使用するか、このようにペンを複製することで、いつでも独自のツールチップを作成できます. これは Ty Strong によって開発されたもので、純粋な CSS ツールチップをどこまで利用できるかを示しています。

このスニペット全体は、HTML <dfn> タグをターゲットにすることで機能します。このタグでラップされたテキストをホバーすると、ツールチップのように表示されるホバー時に自動的にビューにフェードインします。

純粋な CSS 三角形は何年も前から存在しているため、ツールチップスタイルを簡単に再現できます。しかし、私が最も感銘を受けたのは、CSS3 によってすべて制御された滑らかなアニメーションの状態です。

ホバー時の CSS アイコン

これは、純粋な CSS で作成できるクールなもののもう 1 つの例です。これらの単純なボタンにはすべて、カーソルが上に置かれたときにのみ表示される非表示のアイコンがあります。

各アイコンは Font Awesome から提供されているため、このデザインを完全に無料のアイコンで複製できます。

効果には、ホバー時に表示され、カーソルが別の場所に移動すると消える、スライドイン、ストレッチ、およびフェードアイコンが含まれます。

無限のページネーション

Web ページネーションは、おそらくインターフェイスの派手な部分ではないため、常に非常に退屈です。しかし、Mariusz Dabrowski によるこのページネーション効果により、ページネーションを次のレベルに引き上げることができます。

このアニメーションの唯一の点は、あるページから別のページにロードするように作られていることです。そのため、ページ全体がリロードされないAjax を利用したページで最適に機能します。このようにして、新しいコンテンツがビューにロードされている間、アニメーション全体が表示されます。

それは確かに実用的な価値は限られていますが、その効果は素晴らしいです.

オーバーレイナビゲーションアニメーション

フルスクリーンナビゲーションメニューは、モバイルレスポンシブ Web サイトで非常に人気があり、ほとんどのユーザーにも機能します。しかし、CodePen でこのようなオーバーレイ効果を無料で利用できる場合、これらは退屈または静的である必要はありません。

開発者 Ryan Mulligan は、単一の CSS クラスで実行される純粋な CSS キーフレームを使用して、この獣のようなアニメーションを作成しました。

クリックイベントは jQuery 経由でトリガーされますが、モーションはすべて CSS です。間違いなく私が見た中で最もクールなアニメーションの 1 つで、起動は驚くほどスムーズです。

純粋な CSS クリック効果

Google のマテリアルデザインでは、多数のアニメーション効果が概説されており、そのうちの 1 つがリップルクリック効果です。これは Android デバイスで最も一般的ですが、Web にも流出しています。

このペンを使用すると、CSS コードだけを使用して、波及効果を自分の作品に再現できます。

このスニペットは、選択時に点灯するアイコンを対象としているため、ページ要素のタブ移動/選択に少し似ています。しかし、効果は何にでも転送できるため、クローンを簡単に作成できます。

マナボタン

これは、シェイプに SVG を使用し、アニメーションに CSS を使用した、私が今まで見た中で最もユニークなボタン効果の 1 つです。

Coder Dean Hidri はこのマナボタンエフェクトをわずか 80 行の CSS と数十行の HTML (SVG を含む) で作成しました。このボタンをホバーすると、ボタン内のカスタム液体形状がアニメーション化されて背景の塗りつぶしが作成され、その後アニメーション化されます。

このボタンスタイルを使用できるサイトがある場合は、試してみる価値があります。

象徴的なボタン FX

アイコンフォントで多くのことができます。David Darnes によるこれらのアニメーション化されたボタンはその好例です。

アイコンは、ホバーすると異なる方法でアニメーション化され、それぞれ独自の特徴的な効果があります。これらすべてのアイコンを 1 つの Web サイトで使用することはできませんが、カスタムアニメーションスタイルは簡単に複製できます。これらは CSS3 のみで動作し、選択したどのアイコンフォントにも適合します。ほぼすべての Web サイトで複製できる、とても楽しいエフェクトです。

これで私の UX 効果のリストは終わりですが、これが決定的なコレクションではないことは確かです。

Web を精査すると、他にも多くのボタン/アイコンホバー効果を見つけることができ、その多くには無料のソースコードがあります。しかし、カスタム Web アニメーションについて詳しく知りたい場合は、開発者向けのプラグインとリソースの膨大なリストを確認してください。