Tạo Hiệu Ứng Số Tăng Dần (Counter-Up) Cho Blogspot

Đặng Tiến Sĩ Tác giả:
Xuất bản: Thứ Bảy, 29 tháng 12, 2018 -

Counter-Up Jquery Plugin là một hiệu ứng chạy số tăng dần, nhằm giúp cho website thêm đẹp mắt với những con số đang chạy khi người dùng truy cập web.
Hello thì hôm nay mình sẽ chia sẻ cách tạo hiệu ứng chạy số (Counter-Up) nhé.

Counter-Up, Counter-UpDown, Counter-Up Jquery Plugin, CounterUp, Hiệu Ứng Số Tăng Dần, Tạo Hiệu Ứng Số Tăng Dần (Counter-Up) Cho Blogspot

Ở đây mình sẽ giới thiệu cho các bạn 2 cái Jquery Plugin.

Counter Up 1


Truy cập vào Blogger chọn Chủ đề sau đó chọn Chỉnh sửa HTML, rồi thêm đoạn code dưới đây lên trên thẻ đóng </body> nhé.
<script>
//<![CDATA[
!function(e){var t=function(t,n){"use strict";var o=e.document.getElementsByTagName("script")[0],r=e.document.createElement("script");return r.src=t,r.async=!0,o.parentNode.insertBefore(r,o),n&&"function"==typeof n&&(r.onload=n),r};"undefined"!=typeof module?module.exports=t:e.loadJS=t}("undefined"!=typeof global?global:this);
//]]></script>
<script>
//<![CDATA[
        function counter(el, result) {
          let numAnim = new CountUp(document.getElementById(el),0, result);
          setTimeout(function() {
            numAnim.start()
          }, 1e3);
        }

        function updatePostNum(json) {
          counter('count-post', json.feed.openSearch$totalResults.$t)
        }

        function updateCmtNum(json) {
          counter('count-cmt', json.feed.openSearch$totalResults.$t)
        }

        function updateShareNum(json) {
          counter('count-share', json.share.share_count)
        }

        loadJS('https://cdnjs.cloudflare.com/ajax/libs/countup.js/1.9.3/countUp.min.js', function() {
          loadJS('/feeds/posts/default/?alt=json&max-results=0&callback=updatePostNum');
          loadJS('/feeds/comments/default?alt=json&max-results=0&callback=updateCmtNum');
          loadJS('https://graph.facebook.com/https://www.sibenit.net?callback=updateShareNum');
        });
//]]>
</script>

Trong đoạn code trên có dòng:
loadJS('https://graph.facebook.com/https://www.sibenit.net?callback=updateShareNum');

Sửa domain lại domain của mình nhé, ở đây mình ví dụ là https://www.sibenit.net thì sửa lại thành domain của mình.

Cách dùng


Để dùng khai báo các thông số đó ra thì thêm các thuộc tính như sau
id='count-post'id='count-cmt'id='count-share'
<!--hiện thị số bài đăng-->
<span id='count-post'><span>
<!--hiện thị số nhận xét-->
<span id='count-cmt'><span>
<!--hiện thị số share từ facebook-->
<span id='count-share'><span>

Demo


Xem ở cuối trang blog của mình nhé ! chỗ thống kê blogger :P á

Counter Up 2


Thêm đoạn code dưới đây vào trước thẻ đóng </head>
    <script>
        jQuery(document).ready(function($) {
            $('.counter').counterUp({
                delay: 10,
                time: 1000
            });
        });
    </script>

Sau đó khai báo thư viện Counter-Up vào trước thẻ đóng </body>
<script src='//cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js'></script>
<script src='//bfintal.github.io/Counter-Up/jquery.counterup.min.js'></script>

Cách dùng


Chỉ cần thêm thuộc tính class='counter' vào các phẩn tử như sau.
<span class='counter'>1,234,567</span>

Demo


Lời kết


Chúc các bạn có một ngày thư giãn nhé.

Thích
Bình luận



Không có nhận xét nào. bạn hãy là người đầu tiên.


Bài Viết Có Thể Xem

THÔNG BÁO

Biên tập nội dung: Đặng Tiến Sĩ
Sĩ Ben IT Blogger giữ bản quyền nội dung trên website này
Chỉ được phát hành lại nội dung khi có sự đồng ý của chủ sở hữu
Mọi thư từ góp ý vui lòng gửi về địa chỉ dangtiensi.vn@gmail.com

Đóng Liên hệ