Html Code: Have Romantic hearts follow mouse cursor

Special styles for different elements of the website increase its beauty and efficiency. In contrast, the following code adds beauty to the website by placing a style for the mouse cursor. This style includes beautiful hearts that follow the mouse cursor on its movement which attracts more attention to your website from the visitors.

<!-- this script got from www.htmlfreecode.com - Coded by: Krishna Eydat -->
<style>
body {
    margin: 0;
    background: green;
}
#oscar {
    width: 50px;
}
</style>
<div id="wrapper">
<svg xmlns="" id="oscar" viewBox="0 0 391.837 391.837">
<g>
	<path style="fill:#D7443E;" d="M285.257,35.528c58.743,0.286,106.294,47.836,106.58,106.58
		c0,107.624-195.918,214.204-195.918,214.204S0,248.165,0,142.108c0-58.862,47.717-106.58,106.58-106.58l0,0
		c36.032-0.281,69.718,17.842,89.339,48.065C215.674,53.517,249.273,35.441,285.257,35.528z"/>
</g> 
</svg>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js'></script>

<script>
console.clear();

var oscar = document.getElementById("wrapper");
document.addEventListener("mousemove", getMouse);
oscar.style.position = "absolute";
var oscarpos = { x: 0, y: 0 };
setInterval(followMouse, 50);
var mouse = { x: 0, y: 0 };
var dir = "right";
function getMouse(e) {
    mouse.x = e.pageX;
    mouse.y = e.pageY;
    if (mouse.x > oscarpos.x) {
        dir = "right";
    } else {
        dir = "left";
    }
}
function followMouse() {
    var distX = mouse.x - oscarpos.x - 15;
    var distY = mouse.y - oscarpos.y - 10;
    //Easing motion
    //Progressive reduction of distance 
    oscarpos.x += distX / 5;
    oscarpos.y += distY / 2;
    oscar.style.left = oscarpos.x + "px";
    oscar.style.top = oscarpos.y + "px";
    //Apply css class 
    if (dir == "right") {
        oscar.setAttribute("class", "right");
    } else {
        oscar.setAttribute("class", "left");
    }
}
TweenMax.set('#wrapper', { perspective: 800, force3D: true, transformStyle: "preserve-3d" });
CustomWiggle.create("myWiggle", { wiggles: 10, type: "anticipate" });
</script><a target="_blank" href="http://www.htmlfreecode.com/" style="font-size: 8pt; text-decoration: none;font-family:Tahoma">HTML Free Code</a>

If you don't know how to use this code or need more information Click here!

Compatible browsers:

Html Best Codes

Html Code: Have Romantic hearts follow mouse cursor

Links