見出し画像

ホバーエフェクト サイトまとめ

2021.11.10

ホバーエフェクトが面白いと思ったサイトを集めました。

■SEED採用サイト
メニューごとに画像が切り替わります。

raff
画像が動きます。テキストリンクにマウスオーバーで画像が表示されます。

Figma to Wordpress Conversion Servic
カーソルを置いたポイントから楕円状にボタンの色が反転。並んでいるボタンの上でカーソルを移動すると、追従するように動きます。

BRUTUS
本のインデックス部分がリンクになっており、マウスオーバーでインデックス部分が広がってクリックできるようになります。

ポーラ
イラストにカーソルを置くごとに音が鳴り、動きが付きます。

Shapefarm
サムネイルにマウスオーバー時にアニメーションが流れ、マウスアウトするとサムネイルに戻ります。

Logram
サムネイルの背景に色が付きます。

Kazuki Noda Portfolio
ヘッダー部分はカーソルの動きの向きにシールをめくるような動きになります。

BYTHREE
マウスオーバーしたサムネイルがズームされたり、波紋のようになったり色々が施されています。

神戸元町辰屋
商品画像が別の画像に変わります。

Dentsu Craft Tokyo
テキストの色が頭文字から変わっていきます。

エデュワードプレス
ボタン色の反転と矢印に変更。マウスオーバー時のみボタンが矢印になります。シンプルですが、リンク設定されているのがわかりやすいです。

オノデラ製作所
表組の見出しと説明がカーソルを置いた項目の内容に変わります。

Sail
メニューのテキストがウェーブのように動きます。

EXPERIENCE JAPAN PICTOGRAMS
画像の拡大とカーソルが乗っている部分だけ色が変わります。


--------------------------------------------------------
【注意事項】
掲載内容は、独自に調査したものになります。最新の情報と異なる場合もございますので公式サイトにて必ずご確認ください。