Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save Rameshwar-ghodke/54a96bea12274a6e549e3ff88895224b to your computer and use it in GitHub Desktop.
Save Rameshwar-ghodke/54a96bea12274a6e549e3ff88895224b to your computer and use it in GitHub Desktop.
Mouse hover moving effect and show mouse position circle with animation effect.
<style>
#moveItem {width: 25px; height: 25px; background-color: #ff3333ab; position: absolute; box-shadow: 0px 8px 32px 0px #100f0f21; border-radius: 50%;
/* z-index: 1; */ transition:.4s cubic-bezier(.19,1,.22,1);}
</style>
<div id="moveItem"></div
<script>
var item = document.querySelector("#moveItem");
var itemRect = item.getBoundingClientRect();
document.addEventListener("mousemove", followMouse, false);
function followMouse(e) {
var xPos = e.pageX - itemRect.width / 2;
var yPos = e.pageY - itemRect.height / 2;
console.log(xPos + " " + yPos);
item.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment