Counter Up - Raccolta di codice e script

Title
Vai ai contenuti
Counter Up
Utilizzando solo l'oggetto HTML

2,523

Customers

63,075

Total Web Pages

12,218

Cups Of Coffee

CODICE IN OGGETTO HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>
<!-- The code would go before the closing of the </head> tag -->

<!-- partial:index.partial.html -->
<div class="container">
 <div class="row">
   <div class="col-md-4" >
     <h1><span class="counter">2,523</span></h1>
     <h3>Customers</h3>
     <i class="fa fa-users"></i>
   </div>
   <div class="col-md-4">
     <h1><span class="counter">63,075</span></h1>
     <h3>Total Web Pages</h3>
     <i class="fa fa-desktop"></i>
   </div>
   <div class="col-md-4">
     <h1><span class="counter">12,218</span></h1>
     <h3>Cups Of Coffee</h3>
     <i class="fa fa-coffee"></i>
   </div>
 </div>
</div>
<!-- partial -->

 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.counterup/1.0/jquery.counterup.min.js'></script>

<script>
   $('.counter').counterUp({
 delay: 10,
 time: 2000
});
$('.counter').addClass('animated fadeInDownBig');
$('h3').addClass('animated fadeIn');
</script>

CODICE ESPERTO IN OGGETTO HTML (CSS)

.col-md-4 {
 text-align: center;
 padding-bottom: 50px;
 border-right: 1px dashed black;
}

.col-md-4:last-child {
 border-right: 0px solid black;
}

.counter {
 animation-duration: 1s;
 animation-delay: 0s;
}

i {
 font-size: 20px !Important;
}

@media (max-width: 991px) {
 .col-md-4 {
   border-right: 0px dashed black;
   border-bottom: 1px dashed black;
   width: 50%;
   margin: auto auto;
 }
 
 .col-md-4:last-child {
   border-bottom: 0px dashed black;
 }
}
Torna ai contenuti