Join our Telegram group to get instant answers to all your questions, stay updated with the latest posts, and receive regular updates: Join Now!.

How To Add Heart Click Effect In Website

How do I add Heart Click Effect In Your Website, Following Some Simple Steps To You Cam Easily Add Heart Click Effect In Your Website.

Welcome to It's Unique Official.

How To Add Heart Click Effect In Website

Heart click effect is a best for attracting users, How when user click on any loaction of your website webpage It sees heart symbols then his mind also attracted and they spend much time on your page because theny engaged with your websites this feature. However they also come back to vist your new posts. That's reason to heart click effect is important for fitness, finances, news, blogging, etc. like this sites for heart click effect is give very bbenefits to this types of sites.

Steps for Adding Heart Click Effect in Website

First: of all Login to your Blogger Dashboard.

Second: On Blogger Dashboard, click Theme.

Third: Click the arrow down icon next to 'customize' button.

Fourth: Click Edit HTML, you will be redirected to editing page.

Fifth: Now search the code </body> and paste the following JavaScript Code just above to it.

<script>
  /*
   * All rights reserved by itisuniqueblog.com
   * LICENSE: MIT License Copyright (c) 2024 It Is Unique Official
   */
  (function (window, document) {
    var hearts = [];

    function init() {
      addStyles('.heart {' +
        'width: 10px;' +
        'height: 10px;' +
        'position: fixed;' +
        'background: #f00;' +
        'transform: rotate(45deg);' +
        '-webkit-transform: rotate(45deg);' +
        '-moz-transform: rotate(45deg);' +
        '}' +
        '.heart:after, .heart:before {' +
        'content: "";' +
        'width: inherit;' +
        'height: inherit;' +
        'background: inherit;' +
        'border-radius: 50%;' +
        '-webkit-border-radius: 50%;' +
        '-moz-border-radius: 50%;' +
        'position: fixed;' +
        '}' +
        '.heart:after {' +
        'top: -5px;' +
        '}' +
        '.heart:before {' +
        'left: -5px;' +
        '}');
      addClickListener();
      animate();
    }

    function animate() {
      for (var i = hearts.length - 1; i >= 0; i--) {
        var heart = hearts[i];
        heart.y--;
        heart.scale = Math.abs(Math.sin(Date.now() * 0.005)) + 0.5; // Pulse effect
        heart.alpha -= 0.01;

        if (heart.alpha <= 0) {
          document.body.removeChild(heart.el);
          hearts.splice(i, 1);
        } else {
          heart.el.style.cssText =
            'left: ' + heart.x + 'px;' +
            'top: ' + heart.y + 'px;' +
            'opacity: ' + heart.alpha + ';' +
            'transform: scale(' + heart.scale + ') rotate(45deg);' +
            'background: ' + heart.color + ';' +
            'z-index: 99999';
        }
      }
      requestAnimationFrame(animate);
    }

    function addClickListener() {
      var oldOnClick = window.onclick;
      window.onclick = function (event) {
        oldOnClick && oldOnClick();
        createHeart(event);
      }
    }

    function createHeart(event) {
      var heart = document.createElement('div');
      heart.className = 'heart';
      var newHeart = {
        el: heart,
        x: event.clientX - 5,
        y: event.clientY - 5,
        scale: 1,
        alpha: 1,
        color: getRandomColor()
      };
      hearts.push(newHeart);
      document.body.appendChild(heart);
    }

    function addStyles(styles) {
      var style = document.createElement('style');
      style.type = 'text/css';
      style.appendChild(document.createTextNode(styles));
      document.head.appendChild(style);
    }

    function getRandomColor() {
      return 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')';
    }

    window.requestAnimationFrame = (function () {
      return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback) {
          setTimeout(callback, 1000 / 60);
        };
    })();

    init();
  })(window, document); 
</script>

Optionally you can use below cdn if you don't want use above big js script in your website use below .js cdn. Just double click to copy and paste above the </body> code.

<script src="https://itisuniqueofficial.github.io/important/javascript/heart-click-effect/heart-click-effect.js"></script>

Sixth: Save the changes by clicking on this icon .

Conclusion

In this article I shares knowledge about How To Add Heart Click Effect In Website by the if you have any question related this you can also comment your problem in comment section.

If your likes our article then you can also join our telegram channel, follows our social media accouts.

Versatile Professional | Blogger, Web Developer, & Trader | Bridging Content Creation, Tech Innovation, & Financial Markets

You may like these posts

Post a Comment

Enter Image URL / Code Snippets / Quotes / name tag, then click parse button accordingly that you have entered. then copy the parse result and paste it into the comment field.


Cookie Consent

We use cookies on our website to analyze traffic, enhance your browsing experience, and remember your preferences. By continuing to use our site, you consent to our use of cookies. You can manage your cookie preferences in your browser settings. For more information, please read our Privacy Policy.

Google Translate
Bookmark Post