Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tạo Count Up Bằng HTML CSS Và Javascript

Tạo Count Up Bằng HTML CSS Và Javascript


Ngày 25 Tháng 10 Năm 2020

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách tạo count up (hiệu ứng động số tăng dần) cho trang web bằng HTML, CSS, Javascrip kết hợp với thư viện Counter-Up Jquery nhé !


Tạo Cấu Trúc HTML Cho Count Up

Phần đầu tiên chúng ta sẽ đi vào tạo hai file là index.html(nơi lưu trữ HTML) và style.css(nơi lưu trữ mã CSS). Sau đó liên kết chúng với CDN Google Font, Bootstrap v4.5.3, Font Awesome v4.7 và thư viện Counter-Up Jquery thông qua đoạn mã dưới đây nhé:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tạo Count up Cho Trang Web</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js""></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
</body>
</html>

Thêm Các Thẻ HTML Cần Thiết Cho Countup

Trong phần này ngoài việc thêm các thẻ HTMl cần thiết thì mình cũng sử dụng một số class thông dụng trong Bootstrap 4 để chia cột cho bố cục trang web như là container, row, col-lg-6, col-lg-4, col-lg-2...
Nếu bạn muốn xem lại về phần chia bố cục cho trang web bằng Bootstrap 4 thì có thể truy cập ở đây nhé!

HTML

<div class="about-section">
    <div class="container">
        <div class="row">
            <!--Bắt Đầu Cột Thứ 1-->
            <div class="col-lg-4">
                <div class="about-bg">
                    <img src="https://images.pexels.com/photos/2100063/pexels-photo-2100063.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" alt="Hình Ảnh Minh Họa">
                </div>
            </div>
            <!--Kết Thúc Cột Thứ 1-->
            <!--Bắt Đầu Cột Thứ 2-->
            <div class="col-lg-6">
                <div class="section-heading">
                    <h2>Giới Thiệu Về Tôi</h2>
                </div>
                <br>
                <div class="about-content">
                    <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est, repellendus obcaecati ducimus laborum porro eius qui consequuntur quae, itaque deleniti officia architecto sequi consectetur iusto cupiditate dicta accusamus impedit iure. Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit rem sapiente aliquid aliquam cum pariatur itaque unde, accusamus, quam libero harum ipsa accusantium fugiat similique ullam officiis consequuntur officia quos.
                    </p>
                    <br><br><br>
                    <a href="" class="default-btn">Tải Thông Tin Của Tôi</a>
                </div>
                <div class="social">
                    <i class="fa fa-facebook"></i>
                    <i class="fa fa-twitter"></i>
                    <i class="fa fa-linkedin"></i>
                    <i class="fa fa-pinterest"></i>
                    <i class="fa fa-youtube"></i>
                </div>
            </div>
                <!--Kết Thúc Cột Thứ 2-->
            <br /><br /><br />
            <!--Bắt Đầu Cột Thứ 3-->
            <div class="col-lg-2">
                <div class="counter-content">
                    <div class="counter-item">
                        <h3>Dự Án <span class="counter text-primary">600</span></h3>
                    </div>
                    <div class="counter-item">
                        <h3>Khách Hàng <span class="counter text-primary">1200</span></h3>
                    </div>
                    <div class="counter-item">
                        <h3>Thời Gian Làm Việc <span class="counter text-primary">1500</span></h3>
                    </div>
                    <div class="counter-item">
                        <h3>Giải Thưởng <span class="counter text-primary">150</span></h3>
                    </div>
                </div>
            </div>
            <!--Kết Thúc Cột Thứ 3-->
        </div>
    </div>
</div>

Và bây giờ chúng ta sẽ xem cách Bootstrap sẽ chia cột cho chúng ta thông qua hình ảnh dưới đây nhé:

Count_up_1

Thiết Lập Font Chữ, Màu Nền cho Count up

Trong phần này chúng ta sẽ đi vào thiết lập style (font chữ, màu nền, khoảng cách...)cho nội dung trang web thông qua thẻ body trong đoạn mã CSS sau nhé:

CSS

body{
    background-color: #7f5a83;
    background-image: linear-gradient(315deg, #7f5a83 0%, #0d324d 74%);
    height:  100vh;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

Và kết quả bạn xem hình ảnh dưới đây nha:

Count_up_2

Thiết Lập Lại Vị Trí Và Màu Sắc Cho Thành Phần Count up

Phần tiếp theo chúng ta sẽ đi vào sử dụng một số thuộc tính CSS cơ bản để thiết lập lại vị trí, khoảng cách giữa các cột trong thành phần count up đồng thời thiết lập lại màu sắc cho chữ để giúp khách hàng dễ dàng đọc hơn nhé:

CSS

.about-section{
    margin-top: 175px;
     }
.section-heading h2{
    color: white;
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: 400;
    text-transform: capitalize;
    letter-spacing: 1px;
}
.about-bg img{
    width: 100%;
    margin-left: -50px;
    border-radius: 25px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.12),
    0 2px 2px rgba(0,0,0,0.12),
      0 4px 4px rgba(0,0,0,0.12),
    0 8px 8px rgba(0,0,0,0.12),
    0 16px 16px rgba(0,0,0,0.12);
}
.about-content p{
    margin-bottom: 30px;
    color: #fff;
}
.counter-content .counter-item:not(:last-of-type) {
    margin-bottom: 25px;
}
.counter-content h3{
    font-size: 22px;
    font-weight: 400;
    display: block;
    margin:0;
    color: #fff;
}
.counter-content span{
    font-size: 48px;
    font-weight: 400;
    color:#fff;
    display: block;
    line-height: 60px;
    margin-left: 40px;
}

Để dễ hình dung hơn bạn xem hình ảnh dưới đây nhé:

Count_up_3

Thiết Lập Style Cho Nút Và Icon Trong Count Up

Tiếp theo chúng ta sẽ sử dụng thuộc tính một số thuộc tính CSS cơ bản để thiết lập màu sắc, cở chữ, hiệu ứng hover... cho nút và icon thông qua đoạn mã bên dưới nhé:

CSS

.default-btn{
    border: 2px solid #fff;
    text-transform: capitalize;
    color: #fff;
    font-size: 15px;
    border-radius: 50px;
    line-height: 50px;
    font-weight: 400;
    display: inline-block;
    padding: 0 35px;
    letter-spacing: 1px;
}
.default-btn:hover{
    background: deepskyblue;
    color: #fff;
    text-decoration: none;
    box-shadow: 0px 0px 24px 5px rgba(0,0,0,0.3);
}
.section-heading sspan{
    color: #fff;
}
.social .fa{
    color: #fff;
    font-size: 16px;
    margin-right: 2px;
    width: 42px;
    height: 42px;
    border: 2px solid #fff;
    text-align: center;
    line-height: 40px;
    margin-top: 20px;
    cursor: pointer;
    border-radius: 50px;
}

Và kết quả bạn xem bên dưới nhé:

Count_up_4

Tạo Hiệu Ứng Động Số Tăng Dần Cho Count Up

Phần cuối cùng chúng ta sẽ sử dụng đoạn mã Javascript để khởi tạo hiệu ứng chuyển động cho số liệu trong thư viện Counter-Up bằng đoạn mã bên dưới nhé:

Javascript

jQuery(document).ready(function ($) {
    $('.counter').counterUp({
        delay: 10,
        time: 5000
    })
})

Lưu ý là bạn phải đặt đoạn mã nằm cuối cùng trong trang web (Sau các đường dẫn CDN của thư viện) nhé!. Và dưới đây là kết quả cuối cùng:

Và dưới đây là dự án trên Codepen nhé!

See the Pen Tạo Count Up by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn kiến thức về việc tạo count up hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!