CODEWITHSUNDEEP
javascripteventscursormousemovediagonal
lache
lache

Reputation: 830

How to capture or log diagonal mousemovement?

I basically want to move the spider diagonally like an 8 way movement with mouse but I am not sure thats possible? My thoughts: If the x and y coordinates change at the same time then it is diagonal movement right? I can't find anything on diagonal mouse movement.

HTML

<html>

  <head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" 
  </head>

  <body>
  <div class="spiderweb"><i id="cursor" class="fas fa-spider"></i></div>
  </body>

</html>

CSS

body {
  cursor: none;
  display:flex;
  justify-content:center;
  align-items:center;
}

.spiderweb {
  width: 400px;
  height: 400px;
  background: aliceblue;
  background: url(https://cdn.pixabay.com/photo/2016/03/31/20/12/spider-web-1295590_1280.png);
  background-repeat: none;
  background-size: cover;
}

.fa-spider {
  font-size: 2.5em;
}

#cursor {
  position: absolute;
/*   transition-duration: 0.1s; */
  top: 0px;
  left: 0px;
  filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.4));
}

JS

//Get cursor element , set store x and y position//
let mouseCursor = document.querySelector("#cursor");
var oldx = 0;
var oldy = 0;
var direction = "";

//listen to cursor move and get page coordinates
window.addEventListener("mousemove", function (event) {
  var yPos = event.pageY;
  var xPos = event.pageX;
  //set cursor to match page coordinates
  mouseCursor.style.top = yPos + "px";
  mouseCursor.style.left = xPos + "px";
  //determine direction cursor is moving
  if (xPos > oldx) {
    direction = "right";
    oldx = xPos;
    mouseCursor.style.transform = "rotate(90deg)";
  } else if (xPos < oldx) {
    direction = "left";
    oldx = xPos;
    mouseCursor.style.transform = "rotate(-90deg)";
  } else if (yPos > oldy) {
    direction = "down";
    oldy = yPos;
    mouseCursor.style.transform = "rotate(180deg)";
  } else if (yPos < oldy) {
    direction = "up";
    oldy = yPos;
    mouseCursor.style.transform = "rotate(0deg)";
  }

  console.log(direction);

Link to my Code Pen Example SpiderCursor

Upvotes: 0

Views: 326

Answers (2)

lache
lache

Reputation: 830

CHANGED CODE (might be a better way to shorten this?)

if (xPos > oldx && yPos < oldy) {
    direction = "upright";
    oldy = yPos;
    oldx = xPos;
    mouseCursor.style.transform = "rotate(45deg)";
  } else if (xPos < oldx && yPos < oldy) {
    direction = "upleft";
    oldy = yPos;
    oldx = xPos;
    mouseCursor.style.transform = "rotate(-45deg)";
  } else if (xPos > oldx && yPos > oldy) {
    direction = "downright";
    oldy = yPos;
    oldx = xPos;
    mouseCursor.style.transform = "rotate(135deg)";
  } else if (xPos < oldx && yPos > oldy) {
    direction = "downleft";
    oldy = yPos;
    oldx = xPos;
    mouseCursor.style.transform = "rotate(-135deg)";
  } else if (xPos > oldx) {
    direction = "right";
    oldx = xPos;
    mouseCursor.style.transform = "rotate(90deg)";
  } else if (xPos < oldx) {
    direction = "left";
    oldx = xPos;
    mouseCursor.style.transform = "rotate(-90deg)";
  } else if (yPos > oldy) {
    direction = "down";
    oldy = yPos;
    mouseCursor.style.transform = "rotate(180deg)";
  } else if (yPos < oldy) {
    direction = "up";
    oldy = yPos;
    mouseCursor.style.transform = "rotate(0deg)";
  }```

Upvotes: 0

Myron M
Myron M

Reputation: 21

To answer most simply, yes, if both x and y coordinates are changing, then you are moving in some sort of diagonal fashion, thus as you are NOT moving EXACTLY up and down or EXACTLY left and right. Hope that makes sense.

Upvotes: 1

Related Questions