gdlazcano · July 15, 2021 22:37
diff --git a/cursor.html b/cursor.html
 <html>
  <head>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      body {
        overflow: hidden;
      }

      .container {
        width: 100vw;
        height: 100vh;
        background-color: white;
        position: relative;
      }

      .circle {
          width: 60px;
          height: 60px;
          background: white;
          mix-blend-mode: difference;
          position: absolute;
          left: 0;
          top: 0;
          border-radius: 50%;
          pointer-events: none;
        }

    </style>
  </head>
  <body>
    <div class="container">
      <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio enim natus, modi aperiam, aspernatur rerum, molestias corporis fuga nihil dicta fugit in sapiente eveniet eius eos soluta suscipit sunt molestiae. </p>
      <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio enim natus, modi aperiam, aspernatur rerum, molestias corporis fuga nihil dicta fugit in sapiente eveniet eius eos soluta suscipit sunt molestiae. </p>
      <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio enim natus, modi aperiam, aspernatur rerum, molestias corporis fuga nihil dicta fugit in sapiente eveniet eius eos soluta suscipit sunt molestiae. </p>
      <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio enim natus, modi aperiam, aspernatur rerum, molestias corporis fuga nihil dicta fugit in sapiente eveniet eius eos soluta suscipit sunt molestiae. </p>
    <div class="circle"></div>
    </div>
    <script>
      const cursor = document.querySelector(".circle");
      const delay = 250;

      function throttle(callback, limit) {
        let wait = false;
        return function () {
          if (!wait) {
            callback.apply(null, arguments);
            wait = true;
            setTimeout(function () {
              wait = false;
            }, limit);
          }
        };
      }

      // window.resize callback function
      function getDimensions(e) {
        cursor.style.top = `${e.clientY - 25}px`;
        cursor.style.left = `${e.clientX - 25}px`;
      }

      // window.resize event listener
      window.addEventListener("mousemove", (e) => {
        throttle(getDimensions(e), delay);
      });
    </script>
  </body>
 </html>
	<html>
	<head>
	<style>
	* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	}

	body {
	overflow: hidden;
	}

	.container {
	width: 100vw;
	height: 100vh;
	background-color: white;
	position: relative;
	}

	.circle {
	width: 60px;
	height: 60px;
	background: white;
	mix-blend-mode: difference;
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 50%;
	pointer-events: none;
	}

	</style>
	</head>
	<body>
	<div class="container">
	<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio enim natus, modi aperiam, aspernatur rerum, molestias corporis fuga nihil dicta fugit in sapiente eveniet eius eos soluta suscipit sunt molestiae. </p>
	<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio enim natus, modi aperiam, aspernatur rerum, molestias corporis fuga nihil dicta fugit in sapiente eveniet eius eos soluta suscipit sunt molestiae. </p>
	<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio enim natus, modi aperiam, aspernatur rerum, molestias corporis fuga nihil dicta fugit in sapiente eveniet eius eos soluta suscipit sunt molestiae. </p>
	<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio enim natus, modi aperiam, aspernatur rerum, molestias corporis fuga nihil dicta fugit in sapiente eveniet eius eos soluta suscipit sunt molestiae. </p>
	<div class="circle"></div>
	</div>
	<script>
	const cursor = document.querySelector(".circle");
	const delay = 250;

	function throttle(callback, limit) {
	let wait = false;
	return function () {
	if (!wait) {
	callback.apply(null, arguments);
	wait = true;
	setTimeout(function () {
	wait = false;
	}, limit);
	}
	};
	}

	// window.resize callback function
	function getDimensions(e) {
	cursor.style.top = `${e.clientY - 25}px`;
	cursor.style.left = `${e.clientX - 25}px`;
	}

	// window.resize event listener
	window.addEventListener("mousemove", (e) => {
	throttle(getDimensions(e), delay);
	});
	</script>
	</body>
	</html>