Character Cursor Animation
A playful addition to personal sites. This script places a small image on the screen that constantly updates its position to stay close to the user's mouse cursor.
Move your mouse here. The sprite will follow.
Copy the Script
<style>
#follower {
position: absolute; pointer-events: none;
transition: top 0.1s, left 0.1s; /* Smooth lag */
}
</style>
<img id="follower" src="pikachu.gif" width="50">
<script>
document.onmousemove = function(e) {
var pika = document.getElementById("follower");
pika.style.left = (e.pageX + 10) + "px"; // Offset by 10px
pika.style.top = (e.pageY + 10) + "px";
}
</script>Frequently Asked Questions
Yes. Just replace the `src` attribute of the image tag with your own GIF or PNG (e.g., a cat, a spaceship, or a logo).
You need to track the previous X coordinate. If `currentX > previousX`, the mouse is moving right, so you can apply `transform: scaleX(1)`. If moving left, use `scaleX(-1)` to flip the image.
It can be. Ensure the image is small (30-50px) and consider adding an option for users to turn it off.