"Project counter"
Bootstrap 4.1.1 Snippet by Nemra1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Project counter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="sectiontitle">
<h2>Projects statistics</h2>
<span class="headerLine"></span>
</div>
<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>
<span></span>
<p>Projects done</p>
</div>
<div class="item wow fadeInUpBig animated animated" data-number="55" style="visibility: visible;">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow);
body {
font-family: Open Sans, "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 13px;
color: #666;
position: relative;
-webkit-font-smoothing: antialiased;
margin: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
margin: 0;
padding: 0;
font-size: 13px;
direction: ltr;
}
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$.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');
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: