Skip to content

Instantly share code, notes, and snippets.

@glzjin

glzjin/index.html

Last active December 3, 2018 11:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save glzjin/1a4288d3d8364b5f9e95d059a3284e7b to your computer and use it in GitHub Desktop.
Save glzjin/1a4288d3d8364b5f9e95d059a3284e7b to your computer and use it in GitHub Desktop.
Download ZIP
Mouse Follow
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mouse Follow</title>
<style>
#p {
text-align: center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
</style>
</head>
<body>
<progress id="p" value=55 max="100" style="height: 200px; width: 1500px"></progress>
</body>
</html>
<script type="text/javascript">
function getViewport() {
if (document.compatMode == "BackCompat") {
return {
width: document.body.clientWidth,
height: document.body.clientHeight
}
} else {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
}
window.addEventListener("mousemove", (e) => {
let screen = getViewport()
document.getElementById("p").style.width = screen.width
let percent = e.clientX / screen.width * 100
document.getElementById("p").value = percent
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment