【コピペOK】CSS/JSで作る印象的なhoverのアイデアと実装方法
こんにちは、エンジニアの筒井です。
社内では、webのコーディングやインタラクションまわりを中心に担当しています。
今回の記事では、実際にプロジェクトで実装したhoverを簡単にご紹介します。
この記事でわかること
1.【CSS】keyframe
hoverすると、ぽよぽよ動くアイコン。
cssのkeyframeを使って実装しています。
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のように動かす要素を増やした事例。
画像をスケールアップさせるだけなく、枠もスケールダウンさせることで、少しリッチな印象に。
6.【JS】draw SVG
gsapのdrawSVGというモジュールを使って実装しています。
内部的には、svgのstroke-dashoffset属性とstroke-dasharray属性をコントールすることで、アニメーションを実現しています。
実例:pactera-technology-japan / コーポレートサイト
最後に
hoverは、毎回どうしようか悩みますが、デザインにはまって、お客さんに喜んでもらえたときはとても嬉しいです。
私もバリエーションを増やしていこうと思います。
最後までお読みいただきありがとうございました!