A Pen by Shubhra

Thumbnail
This awesome code was written by shubhra, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright shubhra ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Shubhra</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="shares">1000</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/shubhra/a-pen-by-shubhra-OMzexL */
body {
  background: #000;
}
div {
  padding: 10px;
  color: #fff;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 3em;
  font-family: Arial;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
div:before {
  content: "\f004";
  font-family: FontAwesome;
  margin-right: 10px;
  color: red;
}
.shares.heartbeat:before {
    -webkit-animation: heartbeat 1300ms ease 0s infinite normal;
            animation: heartbeat 1300ms ease 0s infinite normal;
}
@-webkit-keyframes heartbeat {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes heartbeat {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}


/*Downloaded from https://www.codeseek.co/shubhra/a-pen-by-shubhra-OMzexL */
(function($) {
  $.fn.countTo = function(options) {
    // merge the default plugin settings with the custom options
    options = $.extend({}, $.fn.countTo.defaults, options || {});

    // how many times to update the value, and how much to increment the value on each update
    var loops = Math.ceil(options.speed / options.refreshInterval),
      increment = (options.to - options.from) / loops;

    return $(this).each(function() {
      var _this = this,
        loopCount = 0,
        value = options.from,
        interval = setInterval(updateTimer, options.refreshInterval);

      function updateTimer() {
        value += increment;
        loopCount++;
        $(_this).html(value.toFixed(options.decimals).replace(/\B(?=(\d{3})+(?!\d))/g, ","));

        if (typeof(options.onUpdate) == 'function') {
          options.onUpdate.call(_this, value);
        }

        if (loopCount >= loops) {
          clearInterval(interval);
          value = options.to;

          if (typeof(options.onComplete) == 'function') {
            options.onComplete.call(_this, value);
          }
        }
      }

    });
  };

  $.fn.countTo.defaults = {
    from: 0, // the number the element should start at
    to: 100, // the number the element should end at
    speed: 2000, // how long it should take to count between the target numbers
    refreshInterval: 20, // how often the element should be updated
    decimals: 0, // the number of decimal places to show
    onUpdate: null, // callback method for every time the element is updated,
    onComplete: null, // callback method for when the element finishes updating
  };
})(jQuery);

jQuery(function($) {
  $('.shares').countTo({
    to: 9999,
    refreshInterval: 20,
    onUpdate: function(value) {
      $('.shares').addClass('heartbeat');
    },
    onComplete: function(value) {
      $('.shares').removeClass('heartbeat');
    }
  });
});

Comments