通常のホバーは、「オン」と「オフ」のタイミングでのみアクションしますが、
ポインティングデバイス(と要素と)の距離や角度を監視すると、漸進的なマイクロインタラクションを作ることができます。
こういった機能自体は、割と昔からさりげなく使われていたりするかと思いますが、
今回は手軽に使えるように、_proxemics_という名のlibraryを作成しました。
ポインターが画面左端に近づくほどサイドバーが引き出される
See the Pen Progressive Hover Effect Demo 03 by pokkur (@pokkur) on CodePen.
Proxemics('.side-bar', {
territory: 0 // ポインターを検知するテリトリー(半径)
}, (_, Styles) => {
// 水平距離でのみアクションさせるための変数
const distanceX = _.distance * Math.max(0, Math.cos(_.radian))
Styles({
// サイドバーの横幅(33px)プラス若干分までポインターが水平に接近した時に、サイドバーを全開にさせたい
transform: `translate(${Math.min(-distanceX + 50, 0)}px, 0)`
})
})
タイル・ギャラリーのフォーカス表現
See the Pen Progressive Hover Effect Demo 01 by pokkur (@pokkur) on CodePen.
Proxemics('.prox', {
territory: 100
}, (_, Styles) => {
// 対象要素の彩度をポインター距離でコントロール
Styles({ filter: `saturate(${Math.max(1 - _.distance * .01, 0)})` })
// ポインターが一定の範囲に近づいた時に、画像の拡大率を変化させる
const Images = _.el.querySelectorAll('img')
Array.prototype.forEach.call(Images, (Image) => {
Image.style.transform = `scale(${Math.max(1, (1 - _.distance * .001) + .2)})`
})
})
その他色々
「徐々にHover効果」の使用範囲は当然デスクトップデバイスに限られてしまいますが、
アイデア次第で「わかりやすさ」、「つかいやすさ」などのUX向上を狙える新しめのアプローチのひとつです。
proxemicsをご利用の上、ぜひお試しください〜。