Astuce de capture de la souris avec JS

Ouvrir dans l'éditeur Publiez votre code

Recommandé

13 June 2025

Scène CSS avec guirlandes lumineuses et escaliers

23 June 2025

<!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);
   }
}

Astuce de capture de la souris avec JS

Recommandé

Un code de Metehan

Scène CSS avec guirlandes lumineuses et escaliers

pousser la langue

HTML

CSS

JS

Recommandé

Un code de Metehan

Scène CSS avec guirlandes lumineuses et escaliers

pousser la langue

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS