How to Add Heart Click Animation in Blogger and WordPress ?

Welcome! Are you looking to add an interactive and visually appealing element to your website? In this step-by-step tutorial, we’ll guide you through the process of adding a delightful heart click animation to your Blogger and WordPress sites. By following these simple steps, you can create an engaging user experience that leaves a lasting impression on your visitors. Let’s get started!

What is Heart Click Animation ?

The heart click animation is an attention-grabbing effect triggered by user clicks on designated areas of your website. By integrating HTML, CSS, and JavaScript, you can infuse playfulness and charm into your web pages. It has gained popularity among website owners for enhancing user engagement and delivering a memorable browsing experience.

Benefits of Heart Click Animation:

• Enhanced User Engagement: Capture users’ attention and encourage them to interact with your content, leading to increased time spent on your website.
• Memorable User Experience: Create a unique and enjoyable browsing experience that visitors are likely to remember.
• Emotional Connection: The heart symbolizes love and affection, and associating it with a click action can evoke positive emotions, fostering a deeper connection with your audience.
• Increased Social Sharing: The visually appealing and interactive nature of your website, with the heart click animation, can entice visitors to share your content on social media, expanding your reach and driving more traffic.

Adding Heart Click Animation in Blogger:

Step 1: Visit blogger.com and log in to your Blogger account.

Step 2: In the Blogger dashboard, click on the “Theme” option.

Step 3: Select “Edit HTML” to access the code editor for your Blogger theme.

Step 4: Copy the provided JavaScript code and paste it just before the closing </body> tag in the HTML code.

<script>
//<![CDATA[
// -----------------------------------------------------------------------------------
// vanillajs-heart-animation by Smart Tech Mukesh (v1.0.0) - https://github.com/smarttechmukesh/vanillajs-heart-animation/
// -----------------------------------------------------------------------------------
!function(e,t){var a,r=[];e.requestAnimationFrame=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)},function e(a){var r=t.createElement("style");r.type="text/css";try{r.appendChild(t.createTextNode(a))}catch(o){r.styleSheet.cssText=a}t.getElementsByTagName("head")[0].appendChild(r)}(".hearts{width:10px;height:10px;position:fixed;background:#f00;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg)}.hearts:after,.hearts:before{content:'';width:inherit;height:inherit;background:inherit;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;position:fixed}.hearts:after{top:-5px}.hearts:before{left:-5px}"),a="function"==typeof e.onclick&&e.onclick,e.onclick=function(e){var o,n;a&&a(),o=e,(n=t.createElement("div")).className="hearts",r.push({el:n,x:o.clientX-5,y:o.clientY-5,scale:1,alpha:1,color:"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}),t.body.appendChild(n)},function e(){for(var a=0;a<r.length;a++)r[a].alpha<=0?(t.body.removeChild(r[a].el),r.splice(a,1)):(r[a].y--,r[a].scale+=.004,r[a].alpha-=.013,r[a].el.style.cssText="left:"+r[a].x+"px;top:"+r[a].y+"px;opacity:"+r[a].alpha+";transform:scale("+r[a].scale+","+r[a].scale+") rotate(45deg);background:"+r[a].color+";z-index:99999");requestAnimationFrame(e)}()}(window,document);
//]]>
</script>

Step 5: Click on the “Save” button to save the changes to your Blogger theme.

Adding Heart Click Animation in Blogger via CDN:

Step 1: Visit blogger.com and log in to your Blogger account.

Step 2: In the Blogger dashboard, click on the “Theme” option.

Step 3: Select “Edit HTML” to access the code editor for your Blogger theme.

Step 4: Add the following line of code just before the closing </body> tag to include the JavaScript file via CDN.

<script src="https://cdn.jsdelivr.net/gh/smarttechmukesh/vanillajs-heart-animation@main/js/main.js"></script>

Step 5: Click on the “Save” button to save the changes to your Blogger theme.

Adding Heart Click Animation in WordPress:

Step 1: Go to the WordPress plugin directory and search for a custom CSS/JS plugin like “Simple Custom CSS and JS.” Install and activate the plugin on your WordPress site.

Step 2: In the WordPress dashboard, locate the plugin settings page. It is usually found in the sidebar menu under “Custom CSS & JS” or a similar name.

Step 3: Copy the provided JavaScript code for the heart click animation. In the plugin settings page, find the section where you can add custom JavaScript code. Paste the code into that section.

// -----------------------------------------------------------------------------------
// vanillajs-heart-animation by Smart Tech Mukesh (v1.0.0) - https://github.com/smarttechmukesh/vanillajs-heart-animation/
// -----------------------------------------------------------------------------------
!function(e,t){var a,r=[];e.requestAnimationFrame=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)},function e(a){var r=t.createElement("style");r.type="text/css";try{r.appendChild(t.createTextNode(a))}catch(o){r.styleSheet.cssText=a}t.getElementsByTagName("head")[0].appendChild(r)}(".hearts{width:10px;height:10px;position:fixed;background:#f00;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg)}.hearts:after,.hearts:before{content:'';width:inherit;height:inherit;background:inherit;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;position:fixed}.hearts:after{top:-5px}.hearts:before{left:-5px}"),a="function"==typeof e.onclick&&e.onclick,e.onclick=function(e){var o,n;a&&a(),o=e,(n=t.createElement("div")).className="hearts",r.push({el:n,x:o.clientX-5,y:o.clientY-5,scale:1,alpha:1,color:"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}),t.body.appendChild(n)},function e(){for(var a=0;a<r.length;a++)r[a].alpha<=0?(t.body.removeChild(r[a].el),r.splice(a,1)):(r[a].y--,r[a].scale+=.004,r[a].alpha-=.013,r[a].el.style.cssText="left:"+r[a].x+"px;top:"+r[a].y+"px;opacity:"+r[a].alpha+";transform:scale("+r[a].scale+","+r[a].scale+") rotate(45deg);background:"+r[a].color+";z-index:99999");requestAnimationFrame(e)}()}(window,document);

Step 4: Once you have pasted the JavaScript code, click on the “Publish” button to save the changes made in the plugin settings.

Conclusion:

Congratulations on successfully adding the heart click animation to your Blogger and WordPress websites! By following this tutorial, you’ve incorporated an engaging and visually captivating element that enhances the browsing experience for your visitors. Enjoy the benefits of increased user engagement, a memorable user experience, emotional connection, and the potential for increased social sharing. Thank you for joining us in this tutorial, and we wish you continued success in captivating your audience with the heart click animation!

Reference: https://smarttechmukesh.com/heart-click-animation/

Source Code From GitHub: https://github.com/smarttechmukesh/vanillajs-heart-animation/