<div class="odometer_wrap">
<div id="count" class="odometer">27,001</div>
</div>

<div id="triangle-left" class="rain"></div>
<div id="triangle-right"></div>
body {
   background: #FFFFF;  
   font-family: Helvetica;
}

#count {
   position: absolute;
   font-size: 14vw;
   left: 20%;
   top: 40%;
   float:left;
   width: 80%;
}

#count .padding {
   float:left;
   color: #AAAAAA;
   margin-top: 8px;
}


#triangle-left {
   width: 0;
	height: 0x;
	border-top: 300px solid #000;
	border-right: 300px solid transparent;
   position:relative;
}

#triangle-right {
   bottom:0px;
   right:0px;
   position:absolute;
	width: 0;
	height: 0x;
	border-top: 300px solid transparent;
	border-right: 300px solid #333;
}

.drop {
  background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255,255,255,0.6)));
  background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
	width:1px;
	height:42px;
	position: absolute;
	bottom:200px;
	-webkit-animation: fall 5.0s linear infinite;
  -moz-animation: fall 5.0s linear infinite;
  
}

/* animate the drops*/
@-webkit-keyframes fall {
	to {margin-top:900px;}
}
@-moz-keyframes fall {
	to {margin-top:900px;}
}



var count = document.querySelector('.odometer');
var value = count.innerText;
    
od = new Odometer({
  el: count,
  value: 00000027,
  duration: 10000,
  // Any option (other than auto and selector) can be passed in here
  format: ''
});

addPadding();
makeRain();
od.update(value);


function addPadding() {
   var pad = 8 - value.length;
   var padding = "";
   for (var i = 0; i < pad; i++) { padding +="0"; }

   $("#count").prepend("<span class='padding'>" + padding + "<span>") 
}

// function to generate a random number range.
function randRange( minNum, maxNum) {
  return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}

function makeRain(){
   var nbDrop = 300; 

   for( i=1;i<nbDrop;i++) {
	   var dropLeft = randRange(0,1600);
	   var dropTop = randRange(-1000,1400);

	   $('.rain').append('<div class="drop" id="drop'+i+'"></div>');
	               
      $('#drop'+i).css('left',dropLeft);
	   $('#drop'+i).css('top',dropTop);
	}
}
Run Pen

External CSS

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/230399/odometer-theme-default.css

External JavaScript

  1. https://github.hubspot.com/odometer/odometer.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js