【コピペOK】CSS/JSで作る印象的なhoverのアイデアと実装方法

こんにちは、エンジニアの筒井です。
社内では、webのコーディングやインタラクションまわりを中心に担当しています。

今回の記事では、実際にプロジェクトで実装したhoverを簡単にご紹介します。

1.【CSS】keyframe

コード

hoverすると、ぽよぽよ動くアイコン。
cssのkeyframeを使って実装しています。

実例：日本マクドナルド / 50周年記念サイト

2.【JS】簡単なアニメーションの組み合わせ

コード

シンプルなアニメーションの組み合わせですが、動かすプロパティ（opacity, background-color, scale, rotation）を多くして複雑に見せることを意識しています。

BALANCeでは、このような複数のアニメーションのタイムラインを、gsapというアニメーションのライブラリを使って作成しています。

実例：QUOITWORKS Inc. / PERSOL Work-Style AWARD 2021

3.【JS】マスクアニメーション

コード

ポイントは、以下の2つです。

・テキストの親要素（div）にoverflow: hiddenをかけてマスクを作る
・テキストを上方向（y: -100%）に動かす→下にセット（y: 100%）→元の位置に戻す（y: 0）

こちらもgsapを使用しています。

実例：株式会社ニューバランス ジャパン / 115周年 ブランディングサイト

4.【JS】吸い付くボタン

コード

Awwwardsなど受賞してるクリエイティブなwebサイトで、よく見かけるボタンです。
LPのコンバージョンボタンに、こちらを実装しました。

ポイントは、以下の通りです。

・requestAnimationFrameでマウスとボタンの中心間の距離を監視
・一定距離以上近づくと、吸い付く動きが発火
・吸い付く動きは、ボタンのx座標とy座標を、easingをかけてマウスの座標の方へ少し動かすことで実現
・発火と同時に、隠してた黒色背景も出す（requestAnimationFrameではなく、gsapで）

codropsに素晴らしいチュートリアルがあるので、ご参考ください。

実例：株式会社ニューバランス ジャパン / 115周年 ブランディングサイト LP

5.【JS】画像+枠のアニメーション

コード

こちらも、2のように動かす要素を増やした事例。
画像をスケールアップさせるだけなく、枠もスケールダウンさせることで、少しリッチな印象に。

実例：日本マクドナルド / 50周年記念サイト

6.【JS】draw SVG

コード１
コード２

gsapのdrawSVGというモジュールを使って実装しています。
内部的には、svgのstroke-dashoffset属性とstroke-dasharray属性をコントールすることで、アニメーションを実現しています。

実例：pactera-technology-japan / コーポレートサイト

最後に

hoverは、毎回どうしようか悩みますが、デザインにはまって、お客さんに喜んでもらえたときはとても嬉しいです。

私もバリエーションを増やしていこうと思います。

最後までお読みいただきありがとうございました！