Have Romantic hearts follow mouse cursor

Written by @kerixa 21 August 2012

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.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<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='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300