proxemics

0.3.1 • Public • Published

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'

or

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値を扱う

Next

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

License

MIT © Pokkur

Package Sidebar

Install

npm i proxemics

Weekly Downloads

2

Version

0.3.1

License

MIT

Unpacked Size

23.8 kB

Total Files

6

Last publish

Collaborators

  • pokkur