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', '#z', function(e) {



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

    console.log(currentMousePos);

  });


});