Stats Count Social Media Effect jQuery - Hiệu ứng tự động đếm số

Stats Count Social jQuery là code thống kê số lượng fan, member trên các mạng xã hội. Các Social Media CSS dạng tĩnh quá nhàn chán với bạn vậy hãy thêm một chút hiệu ứng Effect (chuyển động) để làm làm trang web của bạn cá tính và nổi bật hơn.

Bạn sẽ phải tự nhập số lượng fan, thành viên trên các mạng xã hội khác nhau và mỗi tuần bạn sẽ phải cập nhập (update) lại số lượng lượt likes, follows mới vào html.

Demo: Click vào Result để xem

Yêu cầu cơ bản:

Hãy chắc chắn blog, web của bạn đã có thư viện jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>

Tiếp theo hãy thêm Font Awesome để hiển thị được các biểu tượng icon

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>

Hãy thêm vào phần đầu của trang web (trong thẻ head)

HTML:

Hãy thêm code sau vào web:

<div class="social-follower">
    <div class="social-box">
        <div class="s-icon icon-google"><i class="fa fa-google-plus"></i></div>
        <div class="social-count">
            <div class="s-number stat-count">832</div>
            <div class="s-text">People</div>
        </div>
    </div>
    <div class="social-box">
        <div class="s-icon icon-facebook"><i class="fa fa-facebook"></i></div>
        <div class="social-count">
            <div class="s-number stat-count">1993</div>
            <div class="s-text">Follow</div>
        </div>
    </div>
    <div class="social-box">
        <div class="s-icon icon-twitter"><i class="fa fa-twitter"></i></div>
        <div class="social-count">
            <div class="s-number stat-count">532</div>
            <div class="s-text">Follow</div>
        </div>
    </div>
    <div class="social-box">
        <div class="s-icon icon-github"><i class="fa fa-github fa-6"></i></div>
        <div class="social-count">
            <div class="s-number stat-count">333</div>
            <div class="s-text">Follow</div>
        </div>
    </div>
</div>

Trong đó social-box là mỗi khung con cho mỗi thống kê mạng xã hội chúng ta cần thêm vào và được bao quanh bởi thẻ div có class="social-follower".

CSS:

Hãy thiết lập thuộc tính box-sizing cho các thẻ div để chiều cao, chiều rộng của khung sẽ bao gồm luôn cả padding, border. Thì khi chúng ta xem ở các chế độ (Responsive) nó sẽ tự đông thiết lập chiều cao, chiều rộng phù hợp với khung nhìn.

.social-follower,
.social-box,
.social-box .social-count,
.social-box .social-count .s-number,
.social-box .social-count .s-text {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

Bây giờ hãy làm đẹp cho khung và nội dung trong đó

.social-follower {
  height:60px;
  margin-left:-10px; /*-- Resize box Responsive --*/
  margin-right:-10px; /*-- Resize box Responsive --*/
}
.social-box {
  width: 50%;
  float: left;
  padding: 0 10px; /*-- Resize box Responsive --*/
  margin-bottom: 10px;
  display: inline-block;
}
.social-box .s-icon {
  position: relative;
  width: 60px;
  height: 60px;
  display: block;
  line-height: 60px;
  text-align: center;
  font-size: 22px;
  background-color: #222;
  color: #fff;
  float: left;
}
/*-- Tạo độ bóng cho icon bằng hình tam giác --*/
.social-box .s-icon:before {
  content: " ";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 60px 60px 0 0;
  border-color: rgba(255,255,255,0.1) transparent transparent transparent;
  position: absolute;
  left: 0;
  top: 0;
}
.social-box .social-count {
  background: #f0f0f0; /*-- Màu nền của nội dung --*/
  text-align: center;
  overflow: hidden;
}
.social-box .social-count .s-number {
  color: #222;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 0;
  height: 30px;
  padding-top:10px;
}
.social-box .social-count .s-text {
  text-transform: uppercase;
  font-size: 10px;
  color: #999;
  line-height: 30px;
}

/*-- Thiết lập màu nền cho mỗi mạng xã hội khác nhau --*/
.social-box .icon-facebook {
  background-color: #3b5998;
}
.social-box .icon-google {
  background-color: #dd4b39;
}
.social-box .icon-twitter {
  background-color: #55ACEE;
}

jQuery

Chúng ta sẽ thêm hiệu ứng tự động đếm từ số 1 đến số lượng like, fan ban đầu.

(function($) {
    "Sun Fantastic";
    function count($this) {
        var current = parseInt($this.html(), 10);
        current = current + 1;
        $this.html(++current);
        if (current > $this.data('count')) {
            $this.html($this.data('count'))
        } else {
            setTimeout(function() {
                count($this)
            }, 10) // Tốc độ đếm số, số 1 là nhanh nhất
        }
    }
    $(".stat-count").each(function() {
        $(this).data('count', parseInt($(this).html(), 10));
        $(this).html('0');
        count($(this))
    })
})(jQuery);

Giá trị 0 sẽ là tốc độ đếm nhanh nhất, các giá trị lớn hơn sẽ làm giảm tốc độ đếm số.
Bây giờ bất kì số nào được gán class="stat-count" sẽ tự động kích hoạt đếm đến từ 1 đến giá trị thực.

Chúc bạn thành công !