Warning: Undefined variable $site_logo_tag in /home/xs227318/proclass.jp/public_html/blog/wp-content/themes/simplicity2/lib/blog-card.php on line 519
Warning: Undefined variable $site_logo_tag in /home/xs227318/proclass.jp/public_html/blog/wp-content/themes/simplicity2/lib/blog-card.php on line 519
Warning: Undefined variable $site_logo_tag in /home/xs227318/proclass.jp/public_html/blog/wp-content/themes/simplicity2/lib/blog-card.php on line 519
Warning: Undefined variable $site_logo_tag in /home/xs227318/proclass.jp/public_html/blog/wp-content/themes/simplicity2/lib/blog-card.php on line 519
Warning: Undefined variable $site_logo_tag in /home/xs227318/proclass.jp/public_html/blog/wp-content/themes/simplicity2/lib/blog-card.php on line 519
Warning: Undefined variable $site_logo_tag in /home/xs227318/proclass.jp/public_html/blog/wp-content/themes/simplicity2/lib/blog-card.php on line 519
Warning: Undefined variable $site_logo_tag in /home/xs227318/proclass.jp/public_html/blog/wp-content/themes/simplicity2/lib/blog-card.php on line 519
Warning: Undefined variable $site_logo_tag in /home/xs227318/proclass.jp/public_html/blog/wp-content/themes/simplicity2/lib/blog-card.php on line 519
Warning: Undefined variable $site_logo_tag in /home/xs227318/proclass.jp/public_html/blog/wp-content/themes/simplicity2/lib/blog-card.php on line 519
Warning: Undefined variable $site_logo_tag in /home/xs227318/proclass.jp/public_html/blog/wp-content/themes/simplicity2/lib/blog-card.php on line 519
こんにちは、プロクラスの杉本です！
サイトを制作していて、ホバーアニメーションどうしようかな～と迷うことってよくありますよね。
そこで個人的にではありますが、面白いな、マネしてみたいなと思うホバーアニメーションをされているサイトを5つご紹介したいと思います！
株式会社トランストラクチャ
こちらのサイトは、一部のボタンだけではありますが、ホバーした際に背景が画像に変わるところがあり、個人的にそんなホバーの仕方もあるんだ！と思ったサイトです。
幅広い業界、毎年数百件の人事コンサルティング実績！株式会社トランストラクチャ(本社:東京都)は人事領域の調査・診断、計画・設計、導入・運用により組織・人事課題を解決。組織＆人事コンサルティングで人事課題を見える化し、2030年を見据えた強い組織に導きます。
seaside villa SEEN
こちらのサイトは、画像をホバーした際に画像が波のように揺れるという面白くておしゃれなホバーアニメーションをされているなと思ったサイトです。
SEENは瀬戸内海・向島の海辺に佇むプライベートヴィラ。自然と調和した全景の海を眺めるメゾネットタイプの2つのお部屋と一棟貸し切りにも対応しています。向島という自然豊かなこの場所で景観の美しさという贅沢をお楽しみください。SEEN is a private villa located on the seashore o...
HUMAN MADE株式会社
こちらのサイトは、ボタンをホバーした際にボタンが上下左右に動くという遊び心のある、もう一度触れたくなるようなホバーアニメーションをされているなと思ったサイトです。
HUMAN MADEやCURRY UPを運営するHUMAN MADE株式会社のコーポレートサイトです。各種プロジェクトや最新情報、会社情報などをご覧いただけます。
ぺんてる株式会社
こちらのサイトは、ボタンをホバーした際にペンで赤丸を描いたような会社のイメージにぴったりのホバーアニメーションをされているなと思ったサイトです。
ボールペン、シャープペン、クレヨン、えのぐ、マーカー、修正具などの文具メーカーぺんてる株式会社。商品情報やおすすめ情報を提供しています。
BEYOND ARCHITECTURE
こちらのサイトは、トップページの記事部分をホバーするとその記事に合った画像が背景になるというすごくこだわりを感じるホバーアニメーションをされているなと思ったサイトです。
建築家の職域が広がっている。コミュニティから働き方まで、 彼らが発想するコンテンツはまるで ライフスタイル誌の目次のようだ。建物をつくる建築家も、 本をつくる編集者も、人の日常を通して、 社会に「メッセージ」をストックしている。僕ら（建築家、編集者）は そうした特性を最大限に活かしながら、アウトプットの新たなカタチを創...
いかがだったでしょうか？
今回は、5つサイトをご紹介させていただきましたが、どのサイトも個性があり、工夫されたホバーアニメーションばかりだったのではないかと思います。
上記5つのサイトのように魅了のあるホバーアニメーションを制作していきたいですね！