Created
August 27, 2021 04:11
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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