A JavaScript library for Progressive Hover Effects.
「徐々にHover効果」を制御するJavaScriptライブラリです。

demo

Change Info

2018.08.27

• Add browser library

Setup

yarn add proxemics

npm

import Proxemics from 'proxemics'

or

browser

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/proxemics.js"></script>

Usage

Simple case

Proxemics() function require QuerySelector and Option bracket.

Proxemics('.prox', {})

Proxemics objects holding distance, angle, radian values.
There can be controlling on callback function and if you want use to data-attributes.
Moreover, add/remove class at right timings.

Optional (demo) case

Callback mthods for Proxemics 3rd param.

Proxemics('.prox', {
    territory: 100,
    debuggable: true
}, (_, Styles) => {
    if(_.el.classList.contains('one')) {
        Styles({
            filter: `hue-rotate(${_.angle}deg) saturate(${1 - _.distance * .005})`
        })
    }

    if(_.el.classList.contains('two')) {
        Styles({
            boxShadow: `inset 0 0 0 3px hsla(200, 100%, 40%, ${1 - _.distance * .005}`
        })
    }

    if(_.el.classList.contains('three')) {
        Styles({
            transform: `rotate(${_.angle}deg)`
        })
    }

    if(_.el.classList.contains('four')) {
        let speed = Math.min((_.distance / 500) + .2, 1).toFixed(1) // from .2 to 1
        Proxemics.SpeedTune = () => _.el.style.setProperty('--speed', `${speed}s`)
        _.el.style.color = `black`
        _.el.addEventListener('animationiteration', Proxemics.SpeedTune)
        _.el.innerHTML = speed
    }
})

<div class="one prox"></div>
<div class="two prox"></div>
<div class="three prox"></div>
<div class="four prox"></div>

Options

| Option | Default | Description | | --------------------- | ---------------- | ----------------------------------------------------------------------- | | territory | 10 | radius of territory zone (px) / 半径 | | debuggable | false | display debug / デバッグを表示 | | defaultProxemityClass | 'is-public' | default permanence class / Proxemics要素に永続的に付与 | | activeProxemityClass | 'is-proxemity' | when if mousemove / カーソルがドキュメント上で移動している際に付与 | | intimateClass | 'is-intimate' | mousecursor reached territory / カーソルがterritoryに入った際に付与 | | leftProxemityClass | 'is-left' | when if mouseleave / カーソルがドキュメントから出た際に付与 | | dataDistance | false | inject distance value in data-distance/ data-distanceでdistance値を扱う | | dataAngle | false | inject angle value in data-angle / data-angleでangle値を扱う | | dataRadian | false | inject radian value in data-radian /data-radianでradian値を扱う |

Next

• [ ] throttle option
• [ ] inherit original style
• [ ] destroy method

License

MIT © Pokkur