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:

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

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

1
Hãy để lại một câu trả lời bạn muốn

avatar
250
1 Comment threads
0 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Việt Hưng Recent comment authors
  Subscribe  
Mới nhất Lâu đời nhất
Thông báo
Việt Hưng
Khách
Việt Hưng

Còn muốn nó hiện vậy luôn k cần phải ấn gì hết thì làm sao ạ

Scroll to top
0353.456.495