NicholasKuchiniski · March 30, 2019 21:29
diff --git a/invert.html b/invert.html
 <html>
   <head>
      <title>Invert color on mouse position change</title>
   </head>
   <body style="display: flex; margin: 0px;">
      <div id="scroll" style="height: 52px;width: 52px;filter: invert(100%);position: absolute;background: #000;border-radius: 100%;"></div>
      <div style="background: pink; height: 100vh; width: 50vw"></div>
      <div style="background: yellow; height: 100vh; width: 50vw"></div>
   </body>
   <script>    
      document.addEventListener('mousemove', onMouseUpdate, false);
      document.addEventListener('mouseenter', onMouseUpdate, false);
          
      function onMouseUpdate(e) {
        var x = e.pageX;
        var y = e.pageY;
      
      	var scroll = document.getElementById("scroll");
      	scroll.style.top = y;
      	scroll.style.left = x;
      }
      
      
   </script>	
 </html>
	<html>
	<head>
	<title>Invert color on mouse position change</title>
	</head>
	<body style="display: flex; margin: 0px;">
	<div id="scroll" style="height: 52px;width: 52px;filter: invert(100%);position: absolute;background: #000;border-radius: 100%;"></div>
	<div style="background: pink; height: 100vh; width: 50vw"></div>
	<div style="background: yellow; height: 100vh; width: 50vw"></div>
	</body>
	<script>
	document.addEventListener('mousemove', onMouseUpdate, false);
	document.addEventListener('mouseenter', onMouseUpdate, false);

	function onMouseUpdate(e) {
	var x = e.pageX;
	var y = e.pageY;

	var scroll = document.getElementById("scroll");
	scroll.style.top = y;
	scroll.style.left = x;
	}


	</script>
	</html>