JS Mouse Grabber Trick

Open In Editor Publish Your Code

<!doctype html>
<html lang="en">
<head>
  <title>Webleb</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
  <div id="app"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
      <script id="rendered-js">
const { useState, useRef, useEffect, useLayoutEffect, createContext } = React;

/**
 * Globals
 */

const CONSTANTS = {
  assetPath: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/184729" };

const ASSETS = {
  head: `${CONSTANTS.assetPath}/head.svg`,
  waiting: `${CONSTANTS.assetPath}/hand.svg`,
  stalking: `${CONSTANTS.assetPath}/hand-waiting.svg`,
  grabbing: `${CONSTANTS.assetPath}/hand.svg`,
  grabbed: `${CONSTANTS.assetPath}/hand-with-cursor.svg`,
  shaka: `${CONSTANTS.assetPath}/hand-surfs-up.svg` };

Object.keys(ASSETS).forEach(key => {
  const img = new Image();
  img.src = ASSETS[key];
});

const useHover = () => {
  const ref = useRef();
  const [hovered, setHovered] = useState(false);

const enter = () => setHovered(true);
  const leave = () => setHovered(false);

useEffect(
  () => {
    ref.current.addEventListener("mouseenter", enter);
    ref.current.addEventListener("mouseleave", leave);
    return () => {
      ref.current.removeEventListener("mouseenter", enter);
      ref.current.removeEventListener("mouseleave", leave);
    };
  },
  [ref]);

return [ref, hovered];
};

// Mouse position
const useMousePosition = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

useEffect(() => {
    const setFromEvent = e => setPosition({ x: e.clientX, y: e.clientY });
    window.addEventListener("mousemove", setFromEvent);

return () => {
      window.removeEventListener("mousemove", setFromEvent);
    };
  }, []);

return position;
};

// Element position
const usePosition = () => {
  const ref = useRef();
  const [position, setPosition] = useState({});

const handleResize = () => {
    setPosition(ref.current.getBoundingClientRect());
  };

useLayoutEffect(() => {
    handleResize();
    window.addEventListener('resize', handleResize);

return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, [ref.current]);

return [ref, position];
};

/**
 * React Components
 */

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      debug: false,
      cursorGrabbed: false,
      gameOver: false };

this.handleToggleDebug = this.handleToggleDebug.bind(this);
    this.handleButtonClicked = this.handleButtonClicked.bind(this);
    this.handleCursorGrabbed = this.handleCursorGrabbed.bind(this);
  }

handleToggleDebug() {
    this.setState({
      debug: !this.state.debug });

}

handleCursorGrabbed() {
    this.setState({
      cursorGrabbed: true });

setTimeout(() => {
      this.setState({
        cursorGrabbed: false });

}, 2000);
  }

handleButtonClicked() {
    this.setState({
      gameOver: true });

setTimeout(() => {
      this.setState({
        gameOver: false });

}, 4000);
  }

render() {
    const { cursorGrabbed, gameOver, debug } = this.state;
    const screenStyle = cursorGrabbed ? { cursor: "none" } : {};
    const appClass = debug ? "app app--debug" : "app";

return /*#__PURE__*/(
      React.createElement("div", { className: appClass, style: screenStyle }, /*#__PURE__*/
      React.createElement("section", { className: "container" }, /*#__PURE__*/
      React.createElement("h1", null, "Mouse Grabber"), /*#__PURE__*/
      React.createElement("p", null, "This is a classic website, no traps or weird stuff!"), /*#__PURE__*/

React.createElement("button", "Debug")), /*#__PURE__*/

React.createElement("button", {
        className: "trap-button",
        onClick: this.handleButtonClicked },
      gameOver && "Nice one",
      cursorGrabbed && "Gotcha!",
      !gameOver && !cursorGrabbed && "Button!"), /*#__PURE__*/

React.createElement("div", { className: "grab-zone-wrapper" }, /*#__PURE__*/
      React.createElement(GrabZone, {
        onCursorGrabbed: this.handleCursorGrabbed,
        cursorGrabbed: cursorGrabbed,
        gameOver: gameOver }))));

}}

// GrabZone (The hover trigger zone)
const GrabZone = ({ cursorGrabbed, gameOver, onCursorGrabbed }) => {
  const [outerRef, outerHovered] = useHover();
  const [innerRef, innerHovered] = useHover();
  const [isExtended, setExtendedArm] = useState(false);

// If state is grabbing for a long time, they're being clever!
  useEffect(() => {
    let timer;
    if (state === "grabbing") {
      timer = setTimeout(() => {
        // Not so clever now, are they?
        setExtendedArm(true);
        timer = null;
      }, 2000);
    }
    return () => {
      setExtendedArm(false);
      if (timer) {
        clearTimeout(timer);
      }
    };
  },
  [state]);

return /*#__PURE__*/(
    React.createElement("div", { className: "grab-zone", ref: outerRef }, /*#__PURE__*/
    React.createElement("div", { className: "grab-zone__debug" }, /*#__PURE__*/
    React.createElement("strong", null, "Debug info:"), /*#__PURE__*/
    React.createElement("p", null, "Current state: ", state), /*#__PURE__*/
    React.createElement("p", null, "Extended arm: ", isExtended ? "Yes" : "No")), /*#__PURE__*/

React.createElement("div", { className: "grab-zone__danger", ref: innerRef }, /*#__PURE__*/
    React.createElement(Grabber, {
      state: state,
      gameOver: gameOver,
      extended: isExtended,
      onCursorGrabbed: onCursorGrabbed }))));

};

// Grabber (The graphic)
const Grabber = ({ state, gameOver, extended, onCursorGrabbed }) => {
  const mousePos = useMousePosition();
  const [ref, position] = usePosition();
  const hasCursor = false;

// Calculate rotation of armWrapper
  const x = position.left + position.width * 0.5;
  const y = position.top + position.height * 0.5;
  const angle = gameOver ? 0 : Math.atan2(mousePos.x - x, -(mousePos.y - y)) * (180 / Math.PI);

// Ensure value is within acceptable range (-75 to 75)
  const rotation = Math.min(Math.max(parseInt(angle), -79), 79);

const grabberClass = `grabber grabber--${state} ${extended && "grabber--extended"}`;
  const wrapperStyle = { transform: `rotate(${rotation}deg)` };

let handImageSrc = ASSETS[state];

return /*#__PURE__*/(
    React.createElement("div", { className: grabberClass }, /*#__PURE__*/
    React.createElement("div", { className: "grabber__body" }), /*#__PURE__*/
    React.createElement("img", { className: "grabber__face", src: ASSETS.head }), /*#__PURE__*/
    React.createElement("div", { className: "grabber__arm-wrapper", ref: ref, style: wrapperStyle }, /*#__PURE__*/
    React.createElement("div", { className: "grabber__arm" }, /*#__PURE__*/
    React.createElement("img", {
      className: "grabber__hand",
      src: handImageSrc,
      onMouseEnter: onCursorGrabbed })))));

};

// Render app
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById("app"));
//# sourceURL=pen.js
    </script>

CSS

h1 {
    font-size: 2.2rem;
    margin: 0;
    font-weight: 600;
    line-height: 1.15;
}
@media (min-width: 900px) {
    h1 {
        font-size: 2.488rem;
   }
}
h2 {
    font-size: 1.4rem;
    margin: 0.5rem 0;
    line-height: 1.15;
    font-weight: 200;
}
@media (min-width: 900px) {
    h2 {
        margin: 1rem 0;
        font-size: 1.44rem;
   }
}
p {
    margin-top: 0.25rem;
}
@media (min-width: 900px) {
    p {
        margin-top: 0.5rem;
   }
}
a {
    color: #0f1108;
    text-decoration: none;
    border-bottom: currentcolor 1px solid;
}
.container {
    max-width: 520px;
    margin: 0 auto;
    padding: 0 1rem 100px 1rem;
}
@media (min-width: 900px) {
    .container {
        max-width: 650px;
        padding: 0 1rem 90px 1rem;
   }
}
.app {
    position: relative;
    background: #79c4e7;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 2rem);
    margin: 1rem;
    overflow: hidden;
}
.app--debug .grab-zone {
    background: rgba(0, 0, 0, 0.15);
}
.app--debug .grab-zone__debug {
    display: block;
}
.app--debug .grab-zone__danger {
    background: rgba(0, 0, 0, 0.15);
}
.app--debug .grabber__arm-wrapper {
    background: rgba(0, 0, 0, 0.15);
}
.grab-zone-wrapper {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateX(30%) translateY(50%);
}
.grab-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 700px;
    height: 700px;
    border-radius: 50%;
}
.grab-zone__danger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 400px;
    height: 400px;
    border-radius: 50%;
}
.grab-zone__debug {
    display: none;
    position: absolute;
    width: 300px;
    top: -100px;
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
}
.grabber {
    position: relative;
    width: 100px;
    height: 100px;
}
.grabber__arm-wrapper {
    position: absolute;
    top: -80px;
    width: 24px;
    height: 260px;
}
.grabber__arm {
    position: relative;
    width: 24px;
    height: 200px;
    background: #7d9a9e;
    border-radius: 20px;
    overflow: visible;
    transform: translateY(100%);
    transition: transform 0.2s ease;
}
.grabber__hand {
    display: block;
    position: absolute;
    top: -12px;
    transform: scale(1.4) rotate(-10deg) translateY(100%);
    transform-origin: bottom center;
    transition: transform 0.3s ease;
}
.grabber__face {
    position: absolute;
    width: 75px;
    height: 84px;
    right: 5%;
    transition: transform 0.3s ease;
}
.grabber__body {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 110px;
    height: 95px;
    border-radius: 50%;
    background: #7d9a9e;
    transition: transform 0.3s ease;
}
.grabber--waiting .grabber__hand {
    transform: scale(1.4) rotate(-10deg);
}
.grabber--waiting .grabber__arm {
    transform: translateY(80%);
}
.grabber--waiting .grabber__face {
    transform: translateY(60%);
}
.grabber--stalking .grabber__hand {
    transform: scale(1.4) rotate(-10deg);
}
.grabber--stalking .grabber__arm {
    transform: translateY(70%);
}
.grabber--stalking .grabber__face {
    transform: translateY(10%);
}
.grabber--grabbing .grabber__face {
    transform: translateY(-40%) rotate(10deg);
}
.grabber--grabbing .grabber__arm {
    transform: translateY(0%);
}
.grabber--grabbing .grabber__body {
    transform: translateY(-20%);
}
.grabber--grabbing .grabber__hand {
    transform: scale(1.7) rotate(10deg);
}
.grabber--grabbed .grabber__arm {
    transition: transform 1s ease;
}
.grabber--grabbed .grabber__hand {
    transition: transform 2.5s ease;
}
.grabber--grabbed .grabber__face {
    transform: translateY(70%);
    transition: transform 1s ease;
}
.grabber--grabbed .grabber__body {
    transform: translateY(50%);
    transition: transform 1s ease;
}
.grabber--extended .grabber__arm {
    transform: translateY(-20%);
}
.grabber--extended .grabber__face {
    transform: translateY(-60%) rotate(15deg);
}
.grabber--extended .grabber__body {
    transform: translateY(-40%);
}
.grabber--shaka .grabber__arm {
    transform: translateY(50%);
}
.grabber--shaka .grabber__hand {
    transform: scale(2.5) translateY(10%);
    animation: shaka 0.5s infinite alternate forwards;
    transform-origin: 55% 60%;
}
.grabber--shaka .grabber__face {
    transform: translateY(70%);
    transition: transform 1s ease;
}
.grabber--shaka .grabber__body {
    transform: translateY(50%);
    transition: transform 1s ease;
}
.trap-button {
    position: absolute;
    bottom: 80px;
    right: 70px;
    min-width: 125px;
    background: #8ecacc;
    color: white;
    border-radius: 5px;
    padding: 0.4rem 0.5rem;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.debug-button {
    position: fixed;
    top: 0;
    right: 0;
    background: transparent;
    padding: 1rem;
    margin: 1rem;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.5;
}
@keyframes shaka {
    0% {
        transform: scale(2.5) translateY(0%) rotate(-20deg);
   }
    100% {
        transform: scale(2.5) translateY(0%) rotate(20deg);
   }
}

JS Mouse Grabber Trick

Recommended

Slider / swiper.js

Three.js Particle Shape Morphing with Controls

HTML

CSS

JS

Recommended

Slider / swiper.js

Three.js Particle Shape Morphing with Controls

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS