How can I change cursor properties when not in use?-CodePudding

I'm trying to achieve a visual effect with JavaScript and CSS to fade out a simple custom-made cursor when it's not moving. I don't even know if such an effect is possible, but I think via Keyframes or JavaScript may be possible with a little help.

This is what I've got so far:

var cursor = document.getElementById("cursor");
document.body.addEventListener("mousemove", function(e) {
cursor.style.left = e.clientX   "px",
cursor.style.top = e.clientY   "px";
});

* {
  padding: 0;
  margin: 0;
  border: 0;
}

html, body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: #e8e8e8;
    cursor: none;
}

.inactive-fade-out {
    transition: fadeout 150ms ease-out;
}

@keyframes fadeout {
    from {
      opacity: 1;
    }
    to {
      opacity: 0.1;
    }
}

#cursor {
    position: fixed;
    border-radius: 50%;
    transform: translateX(-50%) translateY(-50%);
    left: -100px;
    top: 50%;
    background-color: black;
    height: 8px;
    width: 8px;
    transition: all 150ms ease-out;
}

<div id="cursor" ></div>

Objective:

Achieve the effect of fading out the cursor when it's not moving in the viewport with CSS or JavaScript

Extra points:

Avoid (if possible) the use of external libraries like jQuery

Your help is very appeciated!

CodePudding user response：

You can use clearTimeout and setTimeout for this

var timeout;
var cursor = document.getElementById("cursor");

document.body.addEventListener("mousemove", function(e) {
  cursor.style.left = e.clientX   "px",
    cursor.style.top = e.clientY   "px";
  cursor.style.opacity = 1;
  clearTimeout(timeout);
  timeout = setTimeout(function() {
    cursor.style.opacity = 0;
  }, 500);
});

* {
  padding: 0;
  margin: 0;
  border: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: #e8e8e8;
  cursor: none;
}

.inactive-fade-out {
  transition: fadeout 150ms ease-out;
}

@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.1;
  }
}

#cursor {
  position: fixed;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
  left: -100px;
  top: 50%;
  background-color: black;
  height: 8px;
  width: 8px;
  transition: all 150ms ease-out;
}

<div id="cursor" ></div>

CodePudding user response：

The way I did it is:

Whenever the mouse is moved, a variable is set with a timestamp of when the mouse was moved. A loop monitors this timestamp and checks if more than 500ms have passed since the cursor moved and it hides it. Else it shows it.

Here's the snippet

var cursor = document.getElementById("cursor");
var last_move_timestamp = Date.now();
var loop = setInterval(function() 
{
  if (Date.now() - last_move_timestamp > 500) 
  {
    document.getElementById('cursor').style.opacity = 0;
  }
  else 
  {
    document.getElementById('cursor').style.opacity = 1;
  }
}, 10);
document.body.addEventListener("mousemove", function(e) {
last_move_timestamp = Date.now();
cursor.style.left = e.clientX   "px",
cursor.style.top = e.clientY   "px";
});

* {
  padding: 0;
  margin: 0;
  border: 0;
}

html, body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: #e8e8e8;
    cursor: none;
}

.inactive-fade-out {
    transition: opacity 150ms ease-out;
}

#cursor {
    position: fixed;
    border-radius: 50%;
    transform: translateX(-50%) translateY(-50%);
    left: -100px;
    top: 50%;
    background-color: black;
    height: 8px;
    width: 8px;
    transition: all 150ms ease-out;
}

<div id="cursor" ></div>