How To Add Heart Click Effect In Website

Welcome to It Is Unique Blog - Official.

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.