Hiệu ứng animate đẹp khi tải thêm bài viết
vào
11 thg 2, 2019
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
Code CSS
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ế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
