Skip to content

Instantly share code, notes, and snippets.

@NicholasKuchiniski
Created March 30, 2019 21:29
Show Gist options
  • Save NicholasKuchiniski/406ac552a63d48a7f3f434ae209aab24 to your computer and use it in GitHub Desktop.
Save NicholasKuchiniski/406ac552a63d48a7f3f434ae209aab24 to your computer and use it in GitHub Desktop.
invert color on mouse scroll
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment