Proxemics NPM | npm.io

alt

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'

browser

<script src="https://cdn.jsdelivr.net/npm/proxemics@0.2.0/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値を扱う