CSSのみでは実装できない、気持ちいい動きのちょっと面白いホバーエフェクト -Attract hover effect

周りがうねうねしたサークル状のアイコン、ホバー時にどんなインタラクションを想像しますか?

カラーが変化したり、裏返しになったり、サイズが大きくなったり、いろいろなエフェクトが考えられると思います。

あまり見たことがない、ホバー時のちょっと面白いインタラクションを紹介します。

サイトのキャプチャ

Climber Interactive


上記ページでの操作をアニメーションgifにしてみました。

ホバーエフェクトの動き

Climber Interactive

ホバーすると、サークル状のアイコンが拡大され、マウスに引きつけられるように小気味よくアニメーションします。

このサイトにインスパイアされたデモも紹介します。

See the Pen Attract hover effect by Louis Hoebregts (@Mamboleoo) on CodePen.

HTML

各アイコンはbutton要素で実装されています。

CSS

CSSは見た目のスタイルのみで、動きはJavaScriptで実装されています。

JavaScript

ホバー時の気持ちいい動きは、スクリプトで制御されています。

sponsors

top of page

©2018 coliss