Coder Wrap provides free to use snippets Coder Wrap provides free to use snippets

Back to HTML
Preview Source Code
Download
HTML
CSS
    /**Typeo CSS Start**/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

* {
 box-sizing: border-box;
}

body {
 font-family: "Poppins", sans-serif;
 color: #444;
 box-sizing: border-box;
 margin: 0px;
}
.container {
    max-width: 1200px;
    padding: 0px 15px;
    width: 100%;
    margin: auto;
}
/**Typeo CSS End**/
    .space-area {
  height:850px;
  background:#ccc;
  padding:100px 0;
  position: relative;
}

.count-area {
    position: relative;
    background:#009aaa;
    padding: 100px 0;
    text-align: center;
    color: #fff;
}
.space-area-cont {
    max-width: 1200px;
    margin: auto;
}
.count-area-content {
    margin-top: 30px;
}
.count-area i {
    font-size: 48px;
}
.count-digit {
    margin: 0;
    color: #fff;
    font-weight: 700;
    font-size: 50px;
}
.count-title {
    font-size: 20px;
}
.count-area-list {
    display: flex;
    flex-flow: row wrap;
}
.count-area-item {
    width:33.33%;
    padding: 0px 15px;
}
@media(max-width: 767px) {
   .count-area-item {
    width:100%;
    
} 
}
JS
   function visible(partial) {
    var $t = partial,
        $w = jQuery(window),
        viewTop = $w.scrollTop(),
        viewBottom = viewTop + $w.height(),
        _top = $t.offset().top,
        _bottom = _top + $t.height(),
        compareTop = partial === true ? _bottom : _top,
        compareBottom = partial === true ? _top : _bottom;

    return ((compareBottom <= viewBottom) && (compareTop >= viewTop) && $t.is(':visible'));

}

$(window).scroll(function(){

  if(visible($('.count-digit')))
    {
      if($('.count-digit').hasClass('counter-loaded')) return;
      $('.count-digit').addClass('counter-loaded');
      
$('.count-digit').each(function () {
  var $this = $(this);
  jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
    duration: 5000,
    easing: 'swing',
    step: function () {
      $this.text(Math.ceil(this.Counter));
    }
  });
});
    }
})
JS File

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *