"Project counter"
Bootstrap 4.1.1 Snippet by adriano3429

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="projectFacts" class="sectionClass"> <div class="fullWidth eight columns"> <div class="projectFactsWrap "> <div class="item wow fadeInUpBig animated animated" data-number="12" style="visibility: visible;"> <i class="fa fa-briefcase"></i> <p id="number1" class="number">12</p> <p>Projects done</p> </div> <div class="item wow fadeInUpBig animated animated" data-number="55" style="visibility: visible;"> <i class="fa fa-smile-o"></i> <p id="number2" class="number">55</p> <span></span> <p>Happy clients</p> </div> <div class="item wow fadeInUpBig animated animated" data-number="359" style="visibility: visible;"> <i class="fa fa-coffee"></i> <p id="number3" class="number">359</p> <span></span> <p>Cups of coffee</p> </div> <div class="item wow fadeInUpBig animated animated" data-number="246" style="visibility: visible;"> <i class="fa fa-camera"></i> <p id="number4" class="number">246</p> <span></span> <p>Photos taken</p> </div> </div> </div> </div>
.sectionClass { padding: 20px 0px 50px 0px; position: relative; display: block; } .fullWidth { width: 100% !important; display: table; float: none; padding: 0; min-height: 1px; height: 100%; position: relative; } .sectiontitle { background-position: center; margin: 30px 0 0px; text-align: center; min-height: 20px; } .sectiontitle h2 { font-size: 30px; color: #222; margin-bottom: 0px; padding-right: 10px; padding-left: 10px; } .headerLine { width: 160px; height: 2px; display: inline-block; background: #101F2E; } .projectFactsWrap{ display: flex; margin-top: 30px; flex-direction: row; flex-wrap: wrap; } #projectFacts .fullWidth{ padding: 0; } .projectFactsWrap .item{ width: 25%; height: 100%; padding: 50px 0px; text-align: center; } .projectFactsWrap .item:nth-child(1){ background: rgb(16, 31, 46); } .projectFactsWrap .item:nth-child(2){ background: rgb(18, 34, 51); } .projectFactsWrap .item:nth-child(3){ background: rgb(21, 38, 56); } .projectFactsWrap .item:nth-child(4){ background: rgb(23, 44, 66); } .projectFactsWrap .item p.number{ font-size: 40px; padding: 0; font-weight: bold; } .projectFactsWrap .item p{ color: rgba(255, 255, 255, 0.8); font-size: 18px; margin: 0; padding: 10px; font-family: 'Open Sans'; } .projectFactsWrap .item span{ width: 60px; background: rgba(255, 255, 255, 0.8); height: 2px; display: block; margin: 0 auto; } .projectFactsWrap .item i{ vertical-align: middle; font-size: 50px; color: rgba(255, 255, 255, 0.8); } .projectFactsWrap .item:hover i, .projectFactsWrap .item:hover p{ color: white; } .projectFactsWrap .item:hover span{ background: white; } @media (max-width: 786px){ .projectFactsWrap .item { flex: 0 0 50%; } } /* AUTHOR LINK */ footer{ z-index: 100; padding-top: 50px; padding-bottom: 50px; width: 100%; bottom: 0; left: 0; } footer p { color: rgba(255, 255, 255, 0.8); font-size: 16px; opacity: 0; font-family: 'Open Sans'; width: 100%; word-wrap: break-word; line-height: 25px; -webkit-transform: translateX(-200px); transform: translateX(-200px); margin: 0; -webkit-transition: all 250ms ease; -moz-transition: all 250ms ease; transition: all 250ms ease; } footer .authorWindow a{ color: white; text-decoration: none; } footer p strong { color: rgba(255, 255, 255, 0.9); } .about-me-img { width: 120px; height: 120px; left: 10px; /* bottom: 30px; */ position: relative; border-radius: 100px; } .about-me-img img { } .authorWindow{ width: 600px; background: #75439a; padding: 22px 20px 22px 20px; border-radius: 5px; overflow: hidden; } .authorWindowWrapper{ display: none; left: 110px; top: 0; padding-left: 25px; position: absolute; } .trans{ opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; transition: all 500ms ease; }
$.fn.jQuerySimpleCounter = function( options ) { var settings = $.extend({ start: 0, end: 100, easing: 'swing', duration: 400, complete: '' }, options ); var thisElement = $(this); $({count: settings.start}).animate({count: settings.end}, { duration: settings.duration, easing: settings.easing, step: function() { var mathCount = Math.ceil(this.count); thisElement.text(mathCount); }, complete: settings.complete }); }; $('#number1').jQuerySimpleCounter({end: 12,duration: 3000}); $('#number2').jQuerySimpleCounter({end: 55,duration: 3000}); $('#number3').jQuerySimpleCounter({end: 359,duration: 2000}); $('#number4').jQuerySimpleCounter({end: 246,duration: 2500}); /* AUTHOR LINK */ $('.about-me-img').hover(function(){ $('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('trans'); }, function(){ $('.authorWindowWrapper').stop().fadeOut('fast').find('p').removeClass('trans'); });

Related: See More


Questions / Comments: