Cách Tạo Scroll Indicator UI

Cách Tạo Scroll Indicator UI


Ngày 7 Tháng 11 Năm 2021

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách tạo scroll indicator ui bằng HTML CSS javascript cho thiết kế và phát triển website nha.

Animated Progress Bar On Scroll

HTML

Bước đầu tiên chúng ta sẽ đi vào tạo cấu trúc HTML và thêm các thư viện CDN cần thiết cho Horizontal scroll indicator thông qua đoạn code sau đây nha:

<!DOCTYPE html>
<html lang="vi">
   <head>
      <meta charset="utf-8">
      <title>Scroll  Indicator - Niềm Vui Lập Trình</title>
      <link rel="stylesheet" href="style.css">
      <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
   </head>
   <body>
      <nav>
         <label>Niềm Vui Lập Trình</label>
         <div class="scroll-line"></div>
      </nav>
      <div class="content">
         <h2 class="header">
             Scroll  Indicator  Website
         </h2>
         <p>
            Lorem ipsum dolor sit amet...
         </p>
         <ul>
        <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
           <li>Lorem ipsum</li>
        </ul>
          <p>
            Lorem ipsum dolor sit amet...
         </p>
         <h2>
             Trang Chủ
         </h2>
          <p>
            Lorem ipsum dolor sit amet...
         </p>
          <p>
            Lorem ipsum dolor sit amet...
         </p>
         <h2>
             Về Chúng Tôi
         </h2>
         <p>
            Lorem ipsum dolor sit amet...
         </p>
         <ul>
        <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
           <li>Lorem ipsum</li>
        </ul>
          <p>
            Lorem ipsum dolor sit amet...
         </p>
         <h2>
            Liên Hệ
         </h2>
          <p>
            Lorem ipsum dolor sit amet...
         </p>
        <ul>
        <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
           <li>Lorem ipsum</li>
        </ul>
          <p>
            Lorem ipsum dolor sit amet...
         </p>
         <h2>
            Nội Dung Blog
         </h2>
         <p>
            Lorem ipsum dolor sit amet...
         </p>
         <ul>
        <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
           <li>Lorem ipsum</li>
        </ul>
         <p>
            Lorem ipsum dolor sit amet...
         </p>
         <h2>
           Dịch Vụ
         </h2>
          <p>
            Lorem ipsum dolor sit amet...
         </p>
         <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
           <li>Lorem ipsum</li>
         </ul>
         <p>
            Lorem ipsum dolor sit amet...
         </p>
         <h2>
             Bảng Giá
         </h2>
          <p>
            Lorem ipsum dolor sit amet...
         </p>
        <ul>
        <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
           <li>Lorem ipsum</li>
        </ul>
         <p>
            Lorem ipsum dolor sit amet...
         </p>
             </div>
   </body>
</html>

Ở đây mình có lưu ý là :

  • Do văn bản quá nhiều nên mình lựa chọn dấu ... để rút ngắn bớt nha.
  • Mình sử dụng nhiều thẻ ở đoạn mã trên vì muốn làm dài đoạn văn bản để miêu tả rõ hơn về chức năng scroll indicator.
  • Nếu bạn muốn tạo các đoạn văn bản giả như ở trên thì có thể sử dụng công cụ ở đây nha.

CSS

Tiếp theo chúng ta sẽ sử dụng các thuộc tính CSS cơ bản để xây dựng giao diện cho chức năng scroll indicator bằng đoạn mã dưới đây nha:

@import url('https://fonts.googleapis.com/css?family=Montserrat:700|Noto+Sans|Open+Sans:500,700&display=swap');
*{
  margin: 0;
  padding: 0;
}
nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 85px;
  background: white;
  z-index: 1;
  margin-bottom: 20px;
  border-bottom: 1px solid silver;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
nav label{
  line-height: 85px;
  padding: 0 80px;
  font-size: 50px;
  color: #0089f2;
  font-family: 'Montserrat', sans-serif;
}
.scroll-line{
  height: 4px;
  background: #FF1493;
  margin-bottom: -3px;
  width: 0%;
}
.content{
  margin-top: 90px;
  top: 85px;
  padding: 0 80px;
}
.content h2{
  font-size: 55px;
  font-family: 'Open Sans',sans-serif;
   color: #0089f2;
}
.content p{
  padding: 10px 0;
  font-size: 18px;
  text-align: justify;
  font-family: 'Noto Sans', sans-serif;
}
.content h2{
  font-size: 45px;
  font-family: 'Open Sans',sans-serif;
}
.content ul{
  padding-left: 30px;
}

Javascript

Phần cuối cùng chúng ta sẽ sử dụng Jquery để tạo chức năng hiển thị thanh tiến trình khi người dùng scroll văn bản nha. Để hiểu rõ hơn bạn xem đoạn code sau nha:

$(document).ready(function(){
  $(window).scroll(function(){
    var windowTop = $(window).scrollTop(),
    documentHeight = $(document).height(),
    windowHeight = $(window).height();
    var scroll = (windowTop / (documentHeight - windowHeight))*100;
    $('.scroll-line').css("width", (scroll + '%'));
  });
});

Và kết quả bạn xem video dưới đây nha.

Còn dưới đây là dự án trên Codepen nha.

See the Pen cách tạo Scroll Indicator cho website by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn tham khảo thêm về các hiệu scroll indicator khác thì truy cập ở đây nha.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp cho bạn cách để tạo chức năng Horizontal scroll indicator jquery 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ẻ!