クリエイティブMouseOver効果を持つ20のウェブサイト

Webデザインでも最小 効果は全体的なユーザーエクスペリエンスを変えることができます. これはグリッチ効果、バウンス効果、あるいは単純な効果音のいずれかです。これらの効果の1つ, 最近Webデザインで頻繁に使用されている ホバー効果またはマウスオーバー効果です。この一時的な効果は、特定の要素の上にマウスを移動したときに見られます。 スライドアウト、色の変更、アニメート.

マウスオーバー効果の背後にある考え方は、 努力を減らす ユーザーがする必要があること 詳細の表示、キー情報へのアクセス、またはさまざまなビューの表示 ウェブサイトで。良いホバー効果は、より多くの情報を表示するスペースを節約することができます。 最も賢い方法.

だから、私の読者に この面白い効果のいくつかの例, 私はマウスオーバー効果を持つウェブサイトの20の創造的な例をまとめました。下にスクロールするだけ, ウェブサイトを開いて、遊んで、そして自分の目で確かめてください ホバー効果がどれほど素晴らしいか.

Tomer Lernerによるピクセル

それは異なったものを示す白黒ホームページを持つ非常に創造的なウェブサイトです。 幾何学的図形のダンスと変形 あなたがそれらの上にカーソルを移動したとき.

ハウス

Hausはインタラクティブエージェンシーのウェブサイトです。 技術を愛し、ユーモア. 漫画人形の上にマウスを置く 画面上で彼らがジャンプして実行する方法を見ます.

キャンヴァ

Canvaは さまざまなテキストベースの画像を作成するためのサービス. 彼らのホームページは暗い背景ぼかしを持っています、しかしあなたがそれの上にカーソルを置くとあなたはそれを見るでしょう 領域のクリーンアップとバックグラウンドでの画像の表示, 消しゴムツールのように.

主な作品

Mainworksのクリエイティブメディア制作スタジオのポートフォリオウェブサイトです。. 彼らのプロジェクトを見るためにマウスオーバーするかライン上の点をクリックしてください.

セドリックペレイラ

これはパステル調のCedric Pereiraのポートフォリオウェブサイトです。あなたが カテゴリーをスクロールする ホームページでは、彼らは 色や画像を変更する. また、画像にマウスを合わせると, その境界線が動く.

ブルモンク

Bullmonkは、ビジネス管理サイトです。 ホームページ上の簡単なSVGアニメーション. メッシュ矩形をマウスオーバーするだけで 穴があいている.

共生

共生 バイオ医薬品業界に代替戦略を提供する 医薬品開発プログラムを加速する。マウスを動かしてすごい テキスト、ボタンおよび背景要素とのマイクロインタラクション.

OUI Rクリエイティブスタジオ

OUI Rは 学際的デザインスタジオ 創造的なビジュアルアイディアに基づいて、製品を作成することに専念して画像にマウスカーソルを合わせると、 情報を表示し、マウスのスクロールで次の画像に移動します.

Minnim

Minnimは カラフルな線のついたインタラクティブホームページ マウスホバーで移動します。あなたはできる ロゴ付きの新しいサイクルアイテムを生成する マウスを使う.

フルバンドル

フルバンドルはクリエイティブなデジタルエージェンシーです。彼らのホームページは2つの欄に分かれています。 青い三角形と赤い四角の創造性. これらの要素の上にマウスを置くと、 非常に流動的な方法で跳ねる.

FS無題

FS無題 フォントフェイスの名前を選択するように訪問者を促します。. クリックするとホームページにセルが表示されます。, その特定のフォントのデモにつながります.

トレインローバー

Trainrobberは ARとVRの代理店 それはブランドにとって画期的な没入型体験を生み出します。ホームページにマウスを合わせると、違う テクニカラーの西部映画のように要素が水平方向に動く. カテゴリもmouseoverでアニメートします.

さくらインターナショナル株式会社.

さくらはヒューマンネットワーキングに焦点を当てている日本に拠点を置く会社です。あなたはできる マウスを一回動かすだけで背景のドットをつなぐ.

ファンスタジオ

ファンスタジオは、モバイルゲームやアプリを作成する漫画風のウェブサイトです。動きを感じる 背景はマウスカーソルと一緒に動きます.

スタジオ回転

それは ブランドとデザインスタジオのウェブサイト それはクライアントがオンラインプレゼンスを達成するのを助けます。彼らは白い背景と円のついたホームページを持っています。しかしあなたが メニューボタンをクリックすると、画像が円の中に表示されます。.

TheMcBride会社

TheMcBrideCompanyのホームページには、ぼやけている美しい風景写真が掲載されています。あなたが 背景の上にカーソルを移動する, カーソルの周りの小さな領域 明らかになります。それは素晴らしいですね.

賢いフランク

Clever Frankeは、戦略、デザイン、およびテクノロジを組み合わせたインタラクティブなデザイン会社です。 革新的な製品とサービスを開発する. ホームページのタイトルは動的かつ自動的に生成され、これは魔法のように見えます。あなたが 移動した文字の上にカーソルを移動します, しかし、すぐにフォールバックする.

メッセージデザインセンター

メッセージデザインセンターのウェブサイトはユニークなデザインをしています。彼らのホームページの特徴 多角形の鮮やかなタイトル. これらのタイトルの上にマウスを置くと、 大きくなって変形し始めた.

コーディングしたばかり

Just Codedは素晴らしい キャンバスを形成するドットと暗い背景. このキャンバスの上にマウスを置くと、生きているように見えます。 視点の移動と変化を始める.

キネティックアプリ

これは、特許申請中のテクノロジを使用して構築するデジタルエージェンシーの受賞歴のあるWebサイトです。 iOSおよびAndroidデバイス用のWebサイトおよびアプリ. の ホームページは空のように見える, マウスオーバーするとあなたのように見える 飛ぶ方向を選ぶ.