Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 26
        • Thủ thuật Blogspot 81
          • Tiện ích Blogspot 31
            Máy tính
            • Phần mềm 45
              • Sửa lỗi Windows 20
                • Thủ thuật Windows 78
                  • Cài đặt Windows 43

                    Hướng dẫn tạo hiệu ứng progress bar cho Blog

                    Trước khi đi vào bài mình giới thiệu qua cái tên, lúc đầu mình tính đặt tên Hướng dẫn tạo thanh tiến trình cho Blog nhưng suy nghĩ lại chưa chắc nhiều bạn đã biết thanh tiến trình nó là cái gì cho nên ghi là progress bar chắc sẽ nhiều người biết hơn.

                    Hiểu theo cách đơn giản thì progress bar là một đoạn có màu sắc chạy ngang trên đầu giao diện Blog. Ở đây có 2 loại đó là progress bar xuất hiện khi tải trang và khi scroll kéo thanh cuộn xuống.

                    Với hiệu ứng progress bar khi tải trang sử dụng css kết hợp jquery

                    Copy
                    <style type='text/css'>
                    #progress {
                      position:fixed;
                      z-index:101;
                      top:0;
                      left:-6px;
                      width:1%;
                      height:3px;
                      background:#448aff;
                      -moz-border-radius:1px;
                      -webkit-border-radius:1px;
                      border-radius:1px;
                      -moz-transition:width 500ms ease-out,opacity 400ms linear;
                      -ms-transition:width 500ms ease-out,opacity 400ms linear;
                      -o-transition:width 500ms ease-out,opacity 400ms linear;
                      -webkit-transition:width 500ms ease-out,opacity 400ms linear;
                      transition:width 500ms ease-out,opacity 400ms linear;
                    }
                    #progress dt {
                      opacity:.6;
                      width:180px;
                      right:-80px;
                      clip:rect(-6px,90px,14px,-6px);
                    }
                    #progress dd {
                      opacity:.6;
                      width:20px;
                      right:0;
                      clip:rect(-6px,22px,14px,10px);
                    }
                    </style>
                    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
                    <script>//<![CDATA[
                    $(function() {
                      $('body').append($('<div><dt/><dd/></div>').attr('id', 'progress'))
                      $('#progress').width(100 + '%')
                      $('#progress').width('101%').delay(800).fadeOut(400, function() {
                        $(this).remove()
                      })
                    })
                    //]]></script>

                    Nếu muốn sử dụng hiệu ứng khi cuộn trang chỉ sử dụng jquery:

                    Copy
                    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
                    <script>//<![CDATA[
                    $(function() {
                      $.fn.prognroll = function(options) {
                        var settings = $.extend({
                          height: 3,
                          color: "#448aff",
                          custom: false
                        }, options)
                        return this.each(function() {
                          if ($(this).data('prognroll')) {
                            return false
                          }
                          $(this).data('prognroll', true)
                          var $span = $("<span>", {
                            class: "bar"
                          })
                          $("body").prepend($span);
                          $span.css({
                            position: "fixed",
                            top: 0,
                            left: 0,
                            width: 0,
                            height: settings.height,
                            backgroundColor: settings.color,
                            zindex: 200
                          })
                          if (settings.custom === false) {
                            $(window).scroll(function(e) {
                              e.preventDefault()
                              var windowScrollTop = $(window).scrollTop()
                              var windowHeight = $(window).outerHeight()
                              var bodyHeight = $(document).height()
                              var total = (windowScrollTop / (bodyHeight - windowHeight)) * 100
                              $(".bar").css("width", total + "%")
                            })
                          } else {
                            $(this).scroll(function(e) {
                              e.preventDefault();
                              var customScrollTop = $(this).scrollTop()
                              var customHeight = $(this).outerHeight()
                              var customScrollHeight = $(this).prop("scrollHeight")
                              var total = (customScrollTop / (customScrollHeight - customHeight)) * 100
                              $(".bar").css("width", total + "%")
                            })
                          }
                          $(window).on('hashchange', function(e) {
                            e.preventDefault()
                            console.log($(window).scrollTop())
                          });
                          $(window).trigger('hashchange')
                          var windowScrollTop = $(window).scrollTop()
                          var windowHeight = $(window).outerHeight()
                          var bodyHeight = $("body").outerHeight()
                          var total = (windowScrollTop / (bodyHeight - windowHeight)) * 100
                          $(".bar").css("width", total + "%")
                        })
                      }
                      $('body').prognroll()
                    })
                    //]]></script>

                    Thay #448aff bằng mã màu khác theo ý bạn. Chấm hết bài!!!
                    Nội dung chính
                      Bài đăng mới hơn Bài đăng cũ hơn