9
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-12-20

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

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

https://github.com/pokkur/proxemics

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

sidebar.gif

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

タイル・ギャラリーのフォーカス表現

tile4.gif

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をご利用の上、ぜひお試しください〜。

9
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?