にわかに流行中な「徐々にHover効果」を実装する

通常のホバーは、「オン」と「オフ」のタイミングでのみアクションしますが、
ポインティングデバイス（と要素と）の距離や角度を監視すると、漸進的なマイクロインタラクションを作ることができます。

こういった機能自体は、割と昔からさりげなく使われていたりするかと思いますが、
今回は手軽に使えるように、proxemicsという名のlibraryを作成しました。

https://github.com/pokkur/proxemics

ポインターが画面左端に近づくほどサイドバーが引き出される

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)})`
    })
})

その他色々

https://pokkur.github.io/proxemics/

「徐々にHover効果」の使用範囲は当然デスクトップデバイスに限られてしまいますが、
アイデア次第で「わかりやすさ」、「つかいやすさ」などのUX向上を狙える新しめのアプローチのひとつです。
proxemicsをご利用の上、ぜひお試しください〜。