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

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

avatar
250
  Subscribe  
Thông báo
Scroll to top
0353.456.495