In this tutorial, we will be trying to accomplish the following tricks with JavaScript and CSS animations. Hearts pop up by holding your mouse key or finger on a touch screen and follows your movement.

1. I knew you felt the same when I saw the rosiness on your cheeks...

2. It takes two to find love, and to merge hearts to one…

Now we need to draw the hearts. some typical online tutorials will show you how you can draw hearts in three parts, with 2 circles and a diamond. In this tutorial we do it with 2 rounded rectangles instead, each of them will be rotated by 45°(degrees) and placed symmetrically to each other.

The following CSS will do the job if you paste it correctly between the <style> and </style> tag of your HTML code. #fc2a62 is also preferred more than red because rosy pink is more romantic.

After this, you should save and open the .html file in any preferred browser like chrome or firefox to see a heart on the webpage. The heart can be seen at the top left corner of the webpage.

3. Our heart melts, like snowflakes under the sun of April…

And we have to modify our CSS to accept the animation.
After you save and reload the page you can see the heart fading...

Heart fades

And now we can start working on our Java Script animations, all the following code should be placed between the <script></script> tags.
We have to create the hearts dynamically through the javascript. The following code will do the job.

If you are interested in what the code does, allow me to explain. The variable brd is basically an element for the hearts to attach to, which in the case you append it onto your own website you can change the element ID to make it append onto any arbitrary element.

The duration defines the millisecond time the heart should exist. And speed defines how fast the heart should move around. The cusorXOffset and cursorYOffset allow the heart to be instantiated in the correct position, which you will see come in handy later. The hearts[] array keeps track of all the hearts.

Inside our generateHeart() function, the x and y define the horizontal and vertical position of the heart. xBound defines how wide it can wiggle horizontally and xStart defines which direction it should start wiggle. The scale defines the size of the heart.

Now to see if we are on the right track, append the following code to the end for testing.

And after save and reload we should see heart fading at x:300, y:300.

4. And sometimes our hearts wiggle together…

The animation controller basically just recalculates the position of the heart every 5 milliseconds, resulting in a frame rate of 200 fps. The secret code inside the controller allows the heart to wiggle up in a sinusoidal fashion. The bigger the heart, the wider it wiggles.
Now we should see the heart floating up and wiggling after save and reload.

5. In the end, my heart goes where ever you go…

Finally, we can now make the heart appear while the mouse key or the finger is held on the screen. Appending the following code will do the job.

The code basically generates hearts at the cursor location every 100 milliseconds when the key or finger is held. The secret algorithm generates hearts of appropriate shape and size at random.
Now after save and reload we should see the following like we have seen at the beginning of the article.

Full Code:

For more tricks like this keep visiting Techyinformers or subscribe to our newsletter to get all the latest posts to your mailbox.