JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div id="z">
  <div id="a"></div>
</div>

SCSS

#z {
  background: black;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

#a {
  width: 2px;
  height: 25%;
   background: magenta;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-1px,-50%) rotate(45deg);
  transform-origin: center;
}

JavaScript

// on ready
$(function() {

  
  let currentMousePos = {
    x: -1,
    y: -1
  };
  $('#z').on('mousemove', function(e) {

let currentWin = {
    x: $('#z').width(),
    y: $('#z').height()
  };

    // get our current mouse position
    currentMousePos.x = e.pageX - $(document).scrollLeft();
    currentMousePos.y = e.pageY - $(document).scrollTop();

    console.log(currentMousePos,currentWin);

  });


});