@nomorejalapenos/radar v0.0.17-s3

Radar

Package for tracking the position of the pointer over the element

Usage

import { radar } from '@nomorejalapenos/radar'

const target = document.querySelector('.target')
const removeEvents = radar({ target })

Options

{

  target: HTMLElement

  smoothness?: number
  xSmoothness?: number
  ySmoothness?: number
  hSmoothness?: number

  handle?: {
    enter?: EnterHandler
    leave?: LeaveHandler
    tick?: TickHandler
  }

}

Example

import { radar } from '@nomorejalapenos/radar';

const container = document.createElement('div')
container.style.cssText = `
  position: absolute;
  left: calc(50vw - 25vmin);
  top: calc(50vh - 25vmin);
  width: 50vmin;
  height: 50vmin;
  perspective: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
`

const plane = document.createElement('div')
plane.style.cssText = `
  width: 100%;
  height: 100%;
  background-color: black;
`

const smallPlane = document.createElement('div')
smallPlane.style.cssText = `
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: black;
`

container.appendChild(smallPlane)
container.appendChild(plane)
document.body.appendChild(container)

const removeListeners = radar({
  target: container,
  smoothness: 7,
  hSmoothness: 8,
  handle: {
    tick: (state) => {

      const { x, y } = state.pointerProgress.currentCartesian
      const { h } = state.pointerProgress.current
      const rh = 1 - h

      plane.style.transform = `
        rotateX(
          ${y * (0.25 + 0.25 * rh) * h}rad
        )
        rotateY(
          ${x * (0.25 + 0.25 * rh) * h}rad
        )
        translateZ(
          ${h * 500 * -1}px
        )
      `

      smallPlane.style.transform = `
        translateZ(
          ${h * 500}px
        )
        rotateX(
          ${y * 0.7 * h}rad
        )
        rotateY(
          ${x * 0.7 * h}rad
        )
        rotateZ(
          ${h * Math.PI * 1.25}rad
        )
        scale(
          ${h * 0.2}
        )
      `

      smallPlane.style.backgroundColor = `rgba(
        ${255 / 2 + 255 / 2 * Math.abs(x)},
        ${255 / 2 + 255 / 2 * Math.abs(y)},
        ${200},
        ${h}
      )`
    }
  }
})