Bootstrap Snippet Anirudha Bhowmik numbering animation on scroll using HTML CSS Bootstrap Javascript

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 ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<p class="text-center">Scroll Down</p>
<p>· </p>
<p>· </p>
<p>· </p>
<p>· </p>
<p>· </p>
<p>· </p>
<p>· </p>
<p>· </p>
<p>· </p>
<p>· </p>
<p>· </p>
<p>· </p>
<p>· </p>
<p>· </p>
<p>· </p>
<p>· </p>
<p>· </p>
<p>· </p>
<p>· </p>
<p>· </p>
<p>· </p>
<p>· </p>
<p>· </p>
<p>· </p>
<p>· </p>
<p>· </p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
.c-no{height:150px;}
.grey-bg{background:#ebebeb;}
.counter-Txt{text-align:center; font-size:20px; font-weight:bold; text-transform:uppercase; margin-top:20px;}
.counter-Txt span{display:block; font-size:36px}
@media(min-width:320px) and (max-width:767px){ 
.c-no{height:100%;}
.counter-Txt{margin-top:35px;}
.margin-bot-35{margin-bottom:35px;}
}
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
var a = 0;
$(window).scroll(function() {
  var oTop = $('#counter').offset().top - window.innerHeight;
  if (a == 0 && $(window).scrollTop() > oTop) {
    $('.counter-value').each(function() {
      var $this = $(this),
        countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate({
          countNum: countTo
        },
        {
          duration: 7000,
          easing: 'swing',
          step: function() {
            $this.text(Math.floor(this.countNum));
          },
          complete: function() {
            $this.text(this.countNum);
            //alert('finished');
          }
        });
    });
    a = 1;
  }
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Anirudha Bhowmik numbering animation on scroll"
Bootstrap 4.1.1 Snippet by anirudhabhowmik

Related: See More

Questions / Comments:

"Anirudha Bhowmik numbering animation on scroll" Bootstrap 4.1.1 Snippet by anirudhabhowmik

Related: See More

Questions / Comments:

"Anirudha Bhowmik numbering animation on scroll"
Bootstrap 4.1.1 Snippet by anirudhabhowmik