オンラインでご相談ください!

ご相談内容が完全に固まっていない場合でも
遠慮なくミーティングの予約をどうぞ

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

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

【コピペ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

コード1
コード2

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

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

最後に

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

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

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

DOWNLOAD

未公開実績も多数!
BALANCeの【デザイン・技術】サービス説明資料には、『Javascript』『CSS』の実績が多数掲載されています。
また、関連した会社資料も無料ダウンロードできますので、ぜひご覧ください!

CONTACT

お見積もりやご提案に関しては、費用は発生いたしません。お気軽に、お問い合わせください。

RECRUIT

BALANCeでは共に働く仲間を随時お待ちしております。
印象に残るプロダクトを一緒に作りませんか?

採用情報はこちら

タグから選ぶ