Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 26
        • Thủ thuật Blogspot 82
          • 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

                    Hiệu ứng animate đẹp khi tải thêm bài viết

                    Nếu bạn đã đọc các trang báo mạng như soha, ttvn, kenh14..., khi bạn kéo thanh cuộn xuống dưới chân trang sẽ tự động tải thêm các bài viết tiếp theo, nhưng trước khi hiển thị các bài viết sẽ xuất hiện một hiệu ứng animate khá là đẹp trông nó như demo dưới đây:


                    Nếu bạn cũng muốn áp dụng hiệu ứng này thì tham khảo cách làm như sau:

                    Code HTML

                    Copy
                    <div class="fblwti-animated">
                      <div class="fblwtia-mask fblwtia-title-line fblwtia-title-mask-0"></div>
                      <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sapo-line-0"></div>
                      <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sepline-sapo-0"></div>
                      <div class="fblwtia-mask fblwtia-title-line fblwtia-title-mask-1"></div>
                      <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sapo-line-1"></div>
                      <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sepline-sapo-1"></div>
                      <div class="fblwtia-mask fblwtia-front-mask fblwtia-front-mask-2"></div>
                      <div class="fblwtia-mask fblwtia-sapo-line fblwtia-sapo-line-2"></div>
                      <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sepline-sapo-2"></div>
                      <div class="fblwtia-mask fblwtia-front-mask fblwtia-front-mask-3"></div>
                      <div class="fblwtia-mask fblwtia-sapo-line fblwtia-sapo-line-3"></div>
                      <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sepline-sapo-3"></div>
                      <div class="fblwtia-mask fblwtia-front-mask fblwtia-front-mask-4"></div>
                      <div class="fblwtia-mask fblwtia-sapo-line fblwtia-sapo-line-4"></div>
                      <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sepline-sapo-4"></div>
                    </div>

                    Code CSS

                    Copy
                    
                    .fblwtia-mask {
                      background:#fff;
                      position:absolute;
                      -webkit-box-sizing:border-box;
                      -moz-box-sizing:border-box;
                      box-sizing:border-box;
                      height:10px;
                    }
                    .fblwtia-title-line {
                      right:0;
                      left:36%;
                      top:0;
                      height:20px;
                      width:3%;
                    }
                    .fblwtia-front-mask {
                      height:10px;
                      left:36%;
                      width:3%;
                    }
                    .fblwtia-title-mask-1 {
                      top:30px;
                    }
                    .fblwtia-front-mask-2 {
                      top:70px;
                      height:15px;
                    }
                    .fblwtia-front-mask-3 {
                      top:105px;
                    }
                    .fblwtia-front-mask-4 {
                      top:125px;
                    }
                    .fblwtia-sepline-sapo {
                      left:36%;
                      right:0;
                    }
                    .fblwtia-sepline-sapo-0 {
                      top:20px;
                    }
                    .fblwtia-sepline-sapo-1 {
                      top:50px;
                      height:20px;
                    }
                    .fblwtia-sepline-sapo-2 {
                      top:85px;
                      height:20px;
                    }
                    .fblwtia-sepline-sapo-3 {
                      top:115px;
                    }
                    .fblwtia-sepline-sapo-4 {
                      top:135px;
                      height:50px;
                    }
                    .fblwtia-sapo-line {
                      right:0;
                    }
                    .fblwtia-sapo-line-2 {
                      top:70px;
                      left:55%;
                      height:15px;
                    }
                    .fblwtia-sapo-line-3 {
                      top:105px;
                      left:95%;
                    }
                    .fblwtia-sapo-line-4 {
                      top:125px;
                      left:85%;
                      height:10px;
                    }
                    .fblwti-animated {
                      animation-duration:1.5s;
                      animation-fill-mode:forwards;
                      animation-iteration-count:infinite;
                      animation-name:placeHolderShimmer;
                      animation-timing-function:linear;
                      background:#f6f7f8;
                      background:linear-gradient(to right,#eee 8%,#ddd 18%,#eee 33%);
                      background-size:800px 200px;
                      height:185px;
                      position:relative;
                    }
                    @-webkit-keyframes placeHolderShimmer {
                      0% {
                        background-position:-800px 0;
                      }
                      100% {
                        background-position:800px 0;
                      }
                    }
                    .fblwtia-sapo-line-0 {
                      top:0;
                      left:98%;
                      height:20px;
                    }
                    .fblwtia-sapo-line-1 {
                      top:30px;
                      left:85%;
                      height:20px;
                    }

                    Tham khảo thêm bài viết: Hướng dẫn tạo phân trang với nút tải thêm bài viết
                    Nội dung chính
                      Bài đăng mới hơn Bài đăng cũ hơn