motion-sensitive v1.1.1

motion-sensitive

The plugin MotionSensitive create an instance which allows to follow the movements of an element and to deduce a possible direction.

• Install
• Importing
• Quick start
• Methods
  • MotionSensitive({gap, sensibility})
  • .isLookedAt(obj)
  • .isLookedIn(obj1, obj2)

Install

npm i motion-sensitive
or
yarn add motion-sensitive

Importing

import MotionSensitive from "motion-sensitive";

Quick start

usage motion-sensitive plugin

const motion = MotionSensitive();
const btn = document.querySelector("#btn1");

const { x, y, width, height } = btn.getBoundingClientRect();
const point1 = { x, y: y + height };
const point2 = { x: x + width, y: y };

document.body.addEventListener("mousemove", (e) => {
    const mouseX = e.pageX - document.body.offsetLeft;
    const mouseY = e.pageY - document.body.offsetTop;
    motion.trackPoint({
        x: mouseX,
        y: mouseY
    });
});

function spy() {
    if (motion.isLookedIn(point1, point2)) {
        btn.classList.add("wakeup");
    } else {
        btn.classList.remove("wakeup");
    }
    requestAnimationFrame(spy);
}

spy();

click to see DEMO

Methods

MotionSensitive({gap, sensibility})

const motion = MotionSensitive({
    gap: 10,
    sesibility: 10
});

.isLookedAt(obj)

motion.isLookedAt({ x: 1, y: 2 }); // true or false

.isLookedIn(obj1, obj2)

motion.isLookedIn({ x: 1, y: 2 }, { x: 1, y: 1 }); // true or false