[Hướng dẫn] sử dụng scroll animation ( hiệu ứng di chuyển khi cuộn trang)

avatar

the_dav216
310
46
Punbb
Quản trị
Trảm Phong

Bài viết :
216
Points :
310
Like :
46
Punbb
Quản trị

Sử dụng scroll animation ( hiệu ứng di chuyển khi cuộn trang)


Demo:

Hiệu ứng croll animation chắc cũng không còn lạ với các ae hay thiết kế landingpage . hiệu ứng này làm website của các bạn thêm chuyên nghiệp hơn khi mỗi lần scroll (cuộn trang) là lại có hiệu ứng di chuyển.

Đây là chức năng phát triển thêm vì vậy mình sẽ không viết chi tiết quá. các bạn tự tìm hiểu nhé.
Về cơ bản sẽ có 2 loại là scrollMouse ( croll đến đâu hiện đến đó, scroll qua thì nó lại thực hiện làn nữa)
scrollMouse1 thì nó sẽ thực hiện hiệu ứng cho đến khi các bạn f5 ( tải lại trang ) mới thực hiện tiếp

css


Code:
.slideUp{animation-name:slideUp;-webkit-animation-name:slideUp;animation-duration:1s;-webkit-animation-duration:1s;animation-timing-function:ease;-webkit-animation-timing-function:ease;visibility:visible !important;}
@keyframes slideUp{0%{transform:translateY(100%);}
50%{transform:translateY(-8%);}
65%{transform:translateY(4%);}
80%{transform:translateY(-4%);}
95%{transform:translateY(2%);}
100%{transform:translateY(0%);}
}
@-webkit-keyframes slideUp{0%{-webkit-transform:translateY(100%);}
50%{-webkit-transform:translateY(-8%);}
65%{-webkit-transform:translateY(4%);}
80%{-webkit-transform:translateY(-4%);}
95%{-webkit-transform:translateY(2%);}
100%{-webkit-transform:translateY(0%);}
}
.slideLeft{animation-name:slideLeft;-webkit-animation-name:slideLeft;animation-duration:1s;-webkit-animation-duration:1s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.thaiha{animation-name:slideLeft;-webkit-animation-name:slideLeft;animation-duration:2s;-webkit-animation-duration:2s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
@keyframes slideLeft{0%{transform:translateX(150%);}
50%{transform:translateX(-8%);}
65%{transform:translateX(4%);}
80%{transform:translateX(-4%);}
95%{transform:translateX(2%);}
100%{transform:translateX(0%);}
}
@-webkit-keyframes slideLeft{0%{-webkit-transform:translateX(150%);}
50%{-webkit-transform:translateX(-8%);}
65%{-webkit-transform:translateX(4%);}
80%{-webkit-transform:translateX(-4%);}
95%{-webkit-transform:translateX(2%);}
100%{-webkit-transform:translateX(0%);}
}
.slideRight{animation-name:slideRight;-webkit-animation-name:slideRight;animation-duration:1s;-webkit-animation-duration:1s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
@keyframes slideRight{0%{transform:translateX(-150%);}
50%{transform:translateX(8%);}
65%{transform:translateX(-4%);}
80%{transform:translateX(4%);}
95%{transform:translateX(-2%);}
100%{transform:translateX(0%);}
}
@-webkit-keyframes slideRight{0%{-webkit-transform:translateX(-150%);}
50%{-webkit-transform:translateX(8%);}
65%{-webkit-transform:translateX(-4%);}
80%{-webkit-transform:translateX(4%);}
95%{-webkit-transform:translateX(-2%);}
100%{-webkit-transform:translateX(0%);}
}
.slideExpandUp{animation-name:slideExpandUp;-webkit-animation-name:slideExpandUp;animation-duration:1.6s;-webkit-animation-duration:1.6s;animation-timing-function:ease-out;-webkit-animation-timing-function:ease -out;visibility:visible !important;}
@keyframes slideExpandUp{0%{opacity:0;transform:translateY(100%) scaleX(0.5);}
30%{transform:translateY(-8%) scaleX(0.5);}
40%{transform:translateY(2%) scaleX(0.5);}
50%{transform:translateY(0%) scaleX(1.1);}
60%{transform:translateY(0%) scaleX(0.9);}
70%{transform:translateY(0%) scaleX(1.05);}
80%{transform:translateY(0%) scaleX(0.95);}
90%{transform:translateY(0%) scaleX(1.02);}
100%{opacity:1;transform:translateY(0%) scaleX(1);}
}
@-webkit-keyframes slideExpandUp{0%{opacity:0;transform:translateY(100%) scaleX(0.5);}
30%{transform:translateY(-8%) scaleX(0.5);}
40%{transform:translateY(2%) scaleX(0.5);}
50%{transform:translateY(0%) scaleX(1.1);}
60%{transform:translateY(0%) scaleX(0.9);}
70%{transform:translateY(0%) scaleX(1.05);}
80%{transform:translateY(0%) scaleX(0.95);}
90%{transform:translateY(0%) scaleX(1.02);}
100%{opacity:1;transform:translateY(0%) scaleX(1);}
}
.expandUp{animation-name:expandUp;-webkit-animation-name:expandUp;animation-duration:0.7s;-webkit-animation-duration:0.7s;animation-timing-function:ease;-webkit-animation-timing-function:ease;visibility:visible !important;}
@keyframes expandUp{0%{opacity:0;transform:translateY(100%) scale(0.6) scaleY(0.5);}
100%{opacity:1;transform:translateY(0%) scale(1) scaleY(1);}
}
@-webkit-keyframes expandUp{0%{opacity:0;transform:translateY(100%) scale(0.6) scaleY(0.5);}
100%{opacity:1;transform:translateY(0%) scale(1) scaleY(1);}
}
.expandOpen{animation-name:expandOpen;-webkit-animation-name:expandOpen;animation-duration:1.2s;-webkit-animation-duration:1.2s;animation-timing-function:ease-out;-webkit-animation-timing-function:ease-out;visibility:visible !important;}
@keyframes expandOpen{0%{transform:scale(1.8);}
50%{transform:scale(0.95);}
80%{transform:scale(1.05);}
90%{transform:scale(0.98);}
100%{transform:scale(1);}
}
@-webkit-keyframes expandOpen{0%{-webkit-transform:scale(1.8);}
50%{-webkit-transform:scale(0.95);}
80%{-webkit-transform:scale(1.05);}
90%{-webkit-transform:scale(0.98);}
100%{-webkit-transform:scale(1);}
}
.bigEntrance{animation-name:bigEntrance;-webkit-animation-name:bigEntrance;animation-duration:1.6s;-webkit-animation-duration:1.6s;animation-timing-function:ease-out;-webkit-animation-timing-function:ease-out;visibility:visible !important;}
@keyframes bigEntrance{0%{transform:scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);opacity:0.2;}
30%{transform:scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);opacity:1;}
45%{transform:scale(0.98) rotate(1deg) translateX(0%) translateY(0%);opacity:1;}
60%{transform:scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);opacity:1;}
75%{transform:scale(0.99) rotate(1deg) translateX(0%) translateY(0%);opacity:1;}
90%{transform:scale(1.01) rotate(0deg) translateX(0%) translateY(0%);opacity:1;}
100%{transform:scale(1) rotate(0deg) translateX(0%) translateY(0%);opacity:1;}
}
@-webkit-keyframes bigEntrance{0%{-webkit-transform:scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);opacity:0.2;}
30%{-webkit-transform:scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);opacity:1;}
45%{-webkit-transform:scale(0.98) rotate(1deg) translateX(0%) translateY(0%);opacity:1;}
60%{-webkit-transform:scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);opacity:1;}
75%{-webkit-transform:scale(0.99) rotate(1deg) translateX(0%) translateY(0%);opacity:1;}
90%{-webkit-transform:scale(1.01) rotate(0deg) translateX(0%) translateY(0%);opacity:1;}
100%{-webkit-transform:scale(1) rotate(0deg) translateX(0%) translateY(0%);opacity:1;}
}
.hatch{animation-name:hatch;-webkit-animation-name:hatch;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;transform-origin:50% 100%;-ms-transform-origin:50% 100%;-webkit-transform-origin:50% 100%;visibility:visible !important;}
.hatch2{animation-name:hatch;-webkit-animation-name:hatch;animation-duration:1s;-webkit-animation-duration:1s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;transform-origin:50% 100%;-ms-transform-origin:50% 100%;-webkit-transform-origin:50% 100%;visibility:visible !important;}
@keyframes hatch{0%{opacity:0;transform:rotate(0deg) scaleY(0.6);}
20%{transform:rotate(-2deg) scaleY(1.05);}
35%{transform:rotate(2deg) scaleY(1);}
50%{opacity:0.1;transform:rotate(-2deg);}
65%{transform:rotate(1deg);}
80%{transform:rotate(-1deg);}
100%{opacity:1;transform:rotate(0deg);}
}
@-webkit-keyframes hatch{0%{opacity:0;transform:rotate(0deg) scaleY(0.6);}
20%{transform:rotate(-2deg) scaleY(1.05);}
35%{transform:rotate(2deg) scaleY(1);}
50%{opacity:0.1;transform:rotate(-2deg);}
65%{transform:rotate(1deg);}
80%{transform:rotate(-1deg);}
100%{opacity:1;transform:rotate(0deg);}
}
.bounce{animation-name:bounce;-webkit-animation-name:bounce;animation-duration:1.6s;-webkit-animation-duration:1.6s;animation-timing-function:ease;-webkit-animation-timing-function:ease;transform-origin:50% 100%;-ms-transform-origin:50% 100%;-webkit-transform-origin:50% 100%;}
@keyframes bounce{0%{transform:translateY(0%) scaleY(0.6);}
60%{transform:translateY(-100%) scaleY(1.1);}
70%{transform:translateY(0%) scaleY(0.95) scaleX(1.05);}
80%{transform:translateY(0%) scaleY(1.05) scaleX(1);}
90%{transform:translateY(0%) scaleY(0.95) scaleX(1);}
100%{transform:translateY(0%) scaleY(1) scaleX(1);}
}
@-webkit-keyframes bounce{0%{-webkit-transform:translateY(0%) scaleY(0.6);}
60%{-webkit-transform:translateY(-100%) scaleY(1.1);}
70%{-webkit-transform:translateY(0%) scaleY(0.95) scaleX(1.05);}
80%{-webkit-transform:translateY(0%) scaleY(1.05) scaleX(1);}
90%{-webkit-transform:translateY(0%) scaleY(0.95) scaleX(1);}
100%{-webkit-transform:translateY(0%) scaleY(1) scaleX(1);}
}
.pulse{animation-name:pulse;-webkit-animation-name:pulse;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;}
@keyframes pulse{0%{transform:scale(0.9);opacity:0.7;}
50%{transform:scale(1);opacity:1;}
100%{transform:scale(0.9);opacity:0.7;}
}
@-webkit-keyframes pulse{0%{-webkit-transform:scale(0.95);opacity:0.7;}
50%{-webkit-transform:scale(1);opacity:1;}
100%{-webkit-transform:scale(0.95);opacity:0.7;}
}
.floating{animation-name:floating;-webkit-animation-name:floating;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;}
@keyframes floating{0%{transform:translateY(0%);}
50%{transform:translateY(8%);}
100%{transform:translateY(0%);}
}
@-webkit-keyframes floating{0%{-webkit-transform:translateY(0%);}
50%{-webkit-transform:translateY(8%);}
100%{-webkit-transform:translateY(0%);}
}
.tossing{animation-name:tossing;-webkit-animation-name:tossing;animation-duration:2.5s;-webkit-animation-duration:2.5s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;}
@keyframes tossing{0%{transform:rotate(-4deg);}
50%{transform:rotate(4deg);}
100%{transform:rotate(-4deg);}
}
@-webkit-keyframes tossing{0%{-webkit-transform:rotate(-4deg);}
50%{-webkit-transform:rotate(4deg);}
100%{-webkit-transform:rotate(-4deg);}
}
.pullUp{animation-name:pullUp;-webkit-animation-name:pullUp;animation-duration:1.1s;-webkit-animation-duration:1.1s;animation-timing-function:ease-out;-webkit-animation-timing-function:ease-out;transform-origin:50% 100%;-ms-transform-origin:50% 100%;-webkit-transform-origin:50% 100%;}
@keyframes pullUp{0%{transform:scaleY(0.1);}
40%{transform:scaleY(1.02);}
60%{transform:scaleY(0.98);}
80%{transform:scaleY(1.01);}
100%{transform:scaleY(0.98);}
80%{transform:scaleY(1.01);}
100%{transform:scaleY(1);}
}
@-webkit-keyframes pullUp{0%{-webkit-transform:scaleY(0.1);}
40%{-webkit-transform:scaleY(1.02);}
60%{-webkit-transform:scaleY(0.98);}
80%{-webkit-transform:scaleY(1.01);}
100%{-webkit-transform:scaleY(0.98);}
80%{-webkit-transform:scaleY(1.01);}
100%{-webkit-transform:scaleY(1);}
}
.pullDown{animation-name:pullDown;-webkit-animation-name:pullDown;animation-duration:1.1s;-webkit-animation-duration:1.1s;animation-timing-function:ease-out;-webkit-animation-timing-function:ease-out;transform-origin:50% 0%;-ms-transform-origin:50% 0%;-webkit-transform-origin:50% 0%;}
.pullDown1{visibility:visible !important;animation-name:pullDown1;-webkit-animation-name:pullDown1;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-timing-function:ease-out;-webkit-animation-timing-function:ease-out;transform-origin:50% 0%;-ms-transform-origin:50% 0%;-webkit-transform-origin:50% 0%;}
@keyframes pullDown{0%{transform:scaleY(0.1);}
40%{transform:scaleY(1.02);}
60%{transform:scaleY(0.98);}
80%{transform:scaleY(1.01);}
100%{transform:scaleY(0.98);}
80%{transform:scaleY(1.01);}
100%{transform:scaleY(1);}
}
@-webkit-keyframes pullDown{0%{-webkit-transform:scaleY(0.1);}
40%{-webkit-transform:scaleY(1.02);}
60%{-webkit-transform:scaleY(0.98);}
80%{-webkit-transform:scaleY(1.01);}
100%{-webkit-transform:scaleY(0.98);}
80%{-webkit-transform:scaleY(1.01);}
100%{-webkit-transform:scaleY(1);}
}
@keyframes pullDown1{0%{opacity:0;transform:scaleY(0.1);}
90%{opacity:0.4;transform:scaleY(1.08);}
100%{transform:scaleY(1);}
}
@-webkit-keyframes pullDown1{0%{opacity:0;-webkit-transform:scaleY(0.1);}
90%{opacity:0.4;-webkit-transform:scaleY(1.08);}
100%{-webkit-transform:scaleY(1);}
}
.stretchLeft{animation-name:stretchLeft;-webkit-animation-name:stretchLeft;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-timing-function:ease-out;-webkit-animation-timing-function:ease-out;transform-origin:100% 0%;-ms-transform-origin:100% 0%;-webkit-transform-origin:100% 0%;}
@keyframes stretchLeft{0%{transform:scaleX(0.3);}
40%{transform:scaleX(1.02);}
60%{transform:scaleX(0.98);}
80%{transform:scaleX(1.01);}
100%{transform:scaleX(0.98);}
80%{transform:scaleX(1.01);}
100%{transform:scaleX(1);}
}
@-webkit-keyframes stretchLeft{0%{-webkit-transform:scaleX(0.3);}
40%{-webkit-transform:scaleX(1.02);}
60%{-webkit-transform:scaleX(0.98);}
80%{-webkit-transform:scaleX(1.01);}
100%{-webkit-transform:scaleX(0.98);}
80%{-webkit-transform:scaleX(1.01);}
100%{-webkit-transform:scaleX(1);}
}
.stretchRight{visibility:visible !important;animation-name:stretchRight;-webkit-animation-name:stretchRight;animation-duration:1s;-webkit-animation-duration:1s;animation-timing-function:ease-out;-webkit-animation-timing-function:ease-out;transform-origin:0% 0%;-ms-transform-origin:0% 0%;-webkit-transform-origin:0% 0%;}
@keyframes stretchRight{0%{opacity:0;transform:scaleX(0.5);}
40%{transform:scaleX(1.01);}
60%{transform:scaleX(0.98);}
80%{transform:scaleX(1.01);}
100%{transform:scaleX(0.98);}
80%{transform:scaleX(1);}
100%{opacity:1;transform:scaleX(1);}
}
@-webkit-keyframes stretchRight{0%{opacity:0;-webkit-transform:scaleX(0.5);}
40%{-webkit-transform:scaleX(1.01);}
60%{-webkit-transform:scaleX(0.98);}
80%{-webkit-transform:scaleX(1.01);}
100%{-webkit-transform:scaleX(0.98);}
80%{-webkit-transform:scaleX(1);}
100%{opacity:1;-webkit-transform:scaleX(1);}
}
.open{animation-name:open;-webkit-animation-name:open;animation-duration:0s;-webkit-animation-duration:0s;animation-timing-function:ease-out;-webkit-animation-timing-function:ease-out;visibility:visible !important;}
@keyframes open{0%{transform:scale(1.8);}
50%{transform:scale(0.95);}
80%{transform:scale(1.05);}
90%{transform:scale(0.98);}
100%{transform:scale(1);}
}
@-webkit-keyframes open{0%{-webkit-transform:scale(1.8);}
50%{-webkit-transform:scale(0.95);}
80%{-webkit-transform:scale(1.05);}
90%{-webkit-transform:scale(0.98);}
100%{-webkit-transform:scale(1);}
}
.bacsi{animation-name:bigEntrance;animation-duration:1s;animation-iteration-count:1;animation-fill-mode:backwards;animation-timing-function:ease-in-out;-webkit-animation-name:bigEntrance;-webkit-animation-duration:1s;-webkit-animation-iteration-count:1;-webkit-animation-fill-mode:backwards;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
@-webkit-keyframes bacsi{from{bottom:-150px;opacity:0;}
to{bottom:0;opacity:1;}
}
@keyframes bacsi{from{bottom:-150px;opacity:0;}
to{bottom:0;opacity:1;}
}
.fadeIn{animation-name:fadeIn;-webkit-animation-name:fadeIn;animation-duration:1s;-webkit-animation-duration:1s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
@keyframes fadeIn{0%{transform:scale(0);opacity:0.0;}
60%{transform:scale(1.1);}
80%{transform:scale(0.9);opacity:1;}
100%{transform:scale(1);opacity:1;}
}
@-webkit-keyframes fadeIn{0%{-webkit-transform:scale(0);opacity:0.0;}
60%{-webkit-transform:scale(1.1);}
80%{-webkit-transform:scale(0.9);opacity:1;}
100%{-webkit-transform:scale(1);opacity:1;}
}
.slideRight{animation-name:slideRight;-webkit-animation-name:slideRight;animation-duration:0.8s;-webkit-animation-duration:0.8s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
@keyframes slideRight{0%{opacity:0;transform:translateX(-150%);}
50%{transform:translateX(8%);}
65%{transform:translateX(-4%);}
80%{transform:translateX(4%);}
95%{transform:translateX(-2%);}
100%{opacity:1;transform:translateX(0%);}
}
@-webkit-keyframes slideRight{0%{opacity:0;-webkit-transform:translateX(-150%);}
50%{-webkit-transform:translateX(8%);}
65%{-webkit-transform:translateX(-4%);}
80%{-webkit-transform:translateX(4%);}
95%{-webkit-transform:translateX(-2%);}
100%{opacity:1;-webkit-transform:translateX(0%);}
}
@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3, .3, .3);transform:scale3d(.3, .3, .3);}
50%{opacity:1;}
}
@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3, .3, .3);transform:scale3d(.3, .3, .3);}
50%{opacity:1;}
}
.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.zoomIn1{-webkit-animation-name:zoomIn;animation-name:zoomIn;animation-duration:0.3s;-webkit-animation-duration:0.3s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.zoomIn2{-webkit-animation-name:zoomIn;animation-name:zoomIn;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.zoomIn3{-webkit-animation-name:zoomIn;animation-name:zoomIn;animation-duration:0.8s;-webkit-animation-duration:0.8s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.zoomIn4{-webkit-animation-name:zoomIn;animation-name:zoomIn;animation-duration:1.1s;-webkit-animation-duration:1.1s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.zoomIn5{-webkit-animation-name:zoomIn;animation-name:zoomIn;animation-duration:1.3s;-webkit-animation-duration:1.3s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.zoomIn6{-webkit-animation-name:zoomIn;animation-name:zoomIn;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.zoomIn7{-webkit-animation-name:zoomIn;animation-name:zoomIn;animation-duration:1.7s;-webkit-animation-duration:1.7s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.zoomIn8{-webkit-animation-name:zoomIn;animation-name:zoomIn;animation-duration:1.9s;-webkit-animation-duration:1.9s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.zoomIn9{-webkit-animation-name:zoomIn;animation-name:zoomIn;animation-duration:2.1s;-webkit-animation-duration:2.1s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.zoomIn10{-webkit-animation-name:zoomIn;animation-name:zoomIn;animation-duration:2.3s;-webkit-animation-duration:2.3s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight;animation-duration:1.2s;-webkit-animation-duration:1.2s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);}
80%{opacity:0.5;}
100%{opacity:1;-webkit-transform:none;transform:none;}
}
@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);}
80%{opacity:0.5;}
100%{opacity:1;-webkit-transform:none;transform:none;}
}
.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;animation-duration:1.2s;-webkit-animation-duration:1.2s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.zoomInRight1{-webkit-animation-name:zoomInRight;animation-name:zoomInRight;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.zoomInRight2{-webkit-animation-name:zoomInRight;animation-name:zoomInRight;animation-duration:1s;-webkit-animation-duration:1s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.zoomInRight3{-webkit-animation-name:zoomInRight;animation-name:zoomInRight;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.zoomInRight4{-webkit-animation-name:zoomInRight;animation-name:zoomInRight;animation-duration:2s;-webkit-animation-duration:2s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.zoomInRight5{-webkit-animation-name:zoomInRight;animation-name:zoomInRight;animation-duration:2.5s;-webkit-animation-duration:2.5s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1, .1, .1) translate3d(1000px, 0, 0);transform:scale3d(.1, .1, .1) translate3d(1000px, 0, 0);-webkit-animation-timing-function:cubic-bezier(0.550, 0.055, 0.675, 0.190);animation-timing-function:cubic-bezier(0.550, 0.055, 0.675, 0.190);}
60%{opacity:0.1;-webkit-transform:scale3d(.475, .475, .475) translate3d(-10px, 0, 0);transform:scale3d(.475, .475, .475) translate3d(-10px, 0, 0);-webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.320, 1);animation-timing-function:cubic-bezier(0.175, 0.885, 0.320, 1);}
}
@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1, .1, .1) translate3d(1000px, 0, 0);transform:scale3d(.1, .1, .1) translate3d(1000px, 0, 0);-webkit-animation-timing-function:cubic-bezier(0.550, 0.055, 0.675, 0.190);animation-timing-function:cubic-bezier(0.550, 0.055, 0.675, 0.190);}
60%{opacity:0.1;-webkit-transform:scale3d(.475, .475, .475) translate3d(-10px, 0, 0);transform:scale3d(.475, .475, .475) translate3d(-10px, 0, 0);-webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.320, 1);animation-timing-function:cubic-bezier(0.175, 0.885, 0.320, 1);}
}
@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0, 0, 1, -15deg);transform:rotate3d(0, 0, 1, -15deg);opacity:0;}
100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:0.5;}
}
@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0, 0, 1, -15deg);transform:rotate3d(0, 0, 1, -15deg);opacity:0;}
100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:0.5;}
}
.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0, 0, 1, 15deg);transform:rotate3d(0, 0, 1, 15deg);opacity:0;}
100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1;}
}
@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0, 0, 1, 15deg);transform:rotate3d(0, 0, 1, 15deg);opacity:0;}
100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1;}
}
.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight;animation-duration:1s;-webkit-animation-duration:1s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0, 0, 1, -200deg);transform:rotate3d(0, 0, 1, -200deg);opacity:0;}
100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1;}
}
@keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0, 0, 1, -200deg);transform:rotate3d(0, 0, 1, -200deg);opacity:0;}
100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1;}
}
.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(-100%, 0, 0) skewX(-30deg);transform:translate3d(-100%, 0, 0) skewX(-30deg);opacity:0;}
60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:0.3;}
80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);}
100%{-webkit-transform:none;transform:none;opacity:1;}
}
@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(-100%, 0, 0) skewX(-30deg);transform:translate3d(-100%, 0, 0) skewX(-30deg);opacity:0;}
60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:0.3;}
80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);}
100%{-webkit-transform:none;transform:none;opacity:1;}
}
.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;animation-duration:1.8s;-webkit-animation-duration:1.8s;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;visibility:visible !important;}
.benhphukhoa{position:relative;animation-name:slideDown;-webkit-animation-name:slideDown;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-timing-function:ease;-webkit-animation-timing-function:ease;visibility:visible !important;}
.down{position:relative;animation-name:slideDown2;-webkit-animation-name:slideDown2;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-timing-function:ease;-webkit-animation-timing-function:ease;visibility:visible !important;}
@keyframes slideDown{0%{opacity:0;transform:translateY(-100%);}
50%{transform:translateY(8%);}
65%{transform:translateY(-4%);}
80%{transform:translateY(4%);}
95%{transform:translateY(-2%);}
100%{opacity:1;transform:translateY(0%);}
}
@-webkit-keyframes slideDown{0%{opacity:0;-webkit-transform:translateY(-100%);}
50%{-webkit-transform:translateY(8%);}
65%{-webkit-transform:translateY(-4%);}
80%{-webkit-transform:translateY(4%);}
95%{-webkit-transform:translateY(-2%);}
100%{opacity:1;-webkit-transform:translateY(0%);}
}
@keyframes slideDown2{0%{opacity:0;transform:translateY(-50%);}
65%{opacity:0.2;}
100%{opacity:1;transform:translateY(0%);}
}
@-webkit-keyframes slideDown2{0%{opacity:0;-webkit-transform:translateY(-50%);}
65%{opacity:0.2;}
100%{opacity:1;-webkit-transform:translateY(0%);}
}
@keyframes checkbox{0%{opacity:0;height:0;}
99%{opacity:0;}
100%{opacity:1;height:auto;}
}
@-webkit-keyframes checkbox{0%{opacity:0;height:0;}
99%{opacity:0;}
100%{opacity:1;height:auto;}
}
.imgbannerleft1{animation-name:imgbannerleft;-webkit-animation-name:imgbannerleft;animation-duration:1s;-webkit-animation-duration:1s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
@keyframes imgbannerleft{0%{opacity:0;height:0;}
80%{opacity:0;}
100%{opacity:1;height:auto;}
}
@-webkit-keyframes imgbannerleft{0%{opacity:0;height:0;}
80%{opacity:0;}
100%{opacity:1;height:auto;}
}
.imgbannerleft2{animation-name:imgbannerleft;-webkit-animation-name:imgbannerleft;animation-duration:1.8s;-webkit-animation-duration:1.8s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;}
.imgbannerleft3{animation-name:imgbannerleft;-webkit-animation-name:imgbannerleft;animation-duration:2.7s;-webkit-animation-duration:2.7s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;}
.imgbannerleft4{animation-name:imgbannerleft;-webkit-animation-name:imgbannerleft;animation-duration:3.7s;-webkit-animation-duration:3.7s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;}
.tuvand{animation-name:tuvand;animation-duration:3s;animation-iteration-count:1;animation-timing-function:ease-in-out;-webkit-animation-name:tuvand;-webkit-animation-duration:3s;-webkit-animation-iteration-count:1;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
@keyframes tuvand{0%{opacity:0;}
80%{opacity:0.1;transform:scale(0.5);}
100%{opacity:0;transform:scale(1);}
}
@-webkit-keyframes tuvand{0%{opacity:0;}
80%{opacity:0.1;-webkit-transform:scale(0.5);}
100%{opacity:1;-webkit-transform:scale(1);}
}
.tuvana{animation-name:stretchRight;animation-duration:2s;animation-timing-function:ease-in-out;-webkit-animation-name:stretchRight;-webkit-animation-duration:2s;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.hieuungh3{animation-name:hatch;-webkit-animation-name:hatch;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;transform-origin:50% 100%;-ms-transform-origin:50% 100%;-webkit-transform-origin:50% 100%;visibility:visible !important;}
.tuvanb{animation-name:tuvanb;-webkit-animation-name:tuvanb;animation-duration:3s;-webkit-animation-duration:3s;animation-timing-function:ease;-webkit-animation-timing-function:ease;visibility:visible !important;}
@keyframes tuvanb{0%{opacity:0;transform:translateY(100%);}
50%{transform:translateY(-8%);}
65%{transform:translateY(4%);}
80%{transform:translateY(-4%);}
95%{transform:translateY(2%);}
100%{opacity:1;transform:translateY(0%);}
}
@-webkit-keyframes tuvanb{0%{opacity:0;-webkit-transform:translateY(100%);}
50%{-webkit-transform:translateY(-8%);}
65%{-webkit-transform:translateY(4%);}
80%{-webkit-transform:translateY(-4%);}
95%{-webkit-transform:translateY(2%);}
100%{opacity:1;-webkit-transform:translateY(0%);}
}
.slideLeftimg{animation-name:slideLeftimg;-webkit-animation-name:slideLeftimg;animation-duration:1s;-webkit-animation-duration:1s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
@keyframes slideLeftimg{0%{transform:translateX(150%);}
50%{transform:translateX(-4%);}
65%{transform:translateX(0%);}
80%{transform:translateX(0%);}
95%{transform:translateX(0%);}
100%{transform:translateX(0%);}
}
@-webkit-keyframes slideLeftimg{0%{-webkit-transform:translateX(150%);}
50%{-webkit-transform:translateX(-4%);}
65%{-webkit-transform:translateX(0%);}
80%{-webkit-transform:translateX(0%);}
95%{-webkit-transform:translateX(0%);}
100%{-webkit-transform:translateX(0%);}
}
.slideLeft1{animation-name:slideLeft2;-webkit-animation-name:slideLeft2;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.slideLeft2{animation-name:slideLeft2;-webkit-animation-name:slideLeft2;animation-duration:2s;-webkit-animation-duration:2s;animation-timing-function:linear;-webkit-animation-timing-function:linear;visibility:visible !important;}
.slideLeft3{animation-name:slideLeft2;-webkit-animation-name:slideLeft2;animation-duration:3s;-webkit-animation-duration:3s;animation-timing-function:linear;-webkit-animation-timing-function:linear;visibility:visible !important;}
@keyframes slideLeft2{0%{opacity:0;transform:translateX(150%);}
50%{opacity:0.2;transform:translateX(-4%);}
65%{transform:translateX(0%);}
80%{transform:translateX(0%);}
95%{transform:translateX(0%);}
100%{opacity:1;transform:translateX(0%);}
}
@-webkit-keyframes slideLeft2{0%{opacity:0;-webkit-transform:translateX(150%);}
50%{opacity:0.2;-webkit-transform:translateX(-4%);}
65%{-webkit-transform:translateX(0%);}
80%{-webkit-transform:translateX(0%);}
95%{-webkit-transform:translateX(0%);}
100%{opacity:1;-webkit-transform:translateX(0%);}
}
.display-img{animation-name:display;-webkit-animation-name:display;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.display1{animation-name:display;-webkit-animation-name:display;animation-duration:1.2s;-webkit-animation-duration:1.2s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.show{animation-name:display;-webkit-animation-name:display;animation-duration:0.7s;-webkit-animation-duration:0.7s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.show1{animation-name:display;-webkit-animation-name:display;animation-duration:1.2s;-webkit-animation-duration:1.2s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
@keyframes display{0%{opacity:0;}
50%{opacity:0;}
100%{opacity:1;}
}
@-webkit-keyframes display{0%{opacity:0;}
50%{opacity:0;}
100%{opacity:1;}
}
.hieuung1{animation-name:hieuung2;-webkit-animation-name:hieuung2;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.hieuung2{animation-name:hieuung2;-webkit-animation-name:hieuung2;animation-duration:1s;-webkit-animation-duration:1s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.hieuung3{animation-name:hieuung2;-webkit-animation-name:hieuung2;animation-duration:1.4s;-webkit-animation-duration:1.4s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.hieuung4{animation-name:hieuung2;-webkit-animation-name:hieuung2;animation-duration:2s;-webkit-animation-duration:2s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.hieuung5{animation-name:hieuung2;-webkit-animation-name:hieuung2;animation-duration:2.5s;-webkit-animation-duration:2.5s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.run-right1{animation-name:hieuung1;-webkit-animation-name:hieuung1;animation-duration:0.6s;-webkit-animation-duration:0.6s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.run-right2{animation-name:hieuung1;-webkit-animation-name:hieuung1;animation-duration:1.1s;-webkit-animation-duration:1.1s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.run-right3{animation-name:hieuung1;-webkit-animation-name:hieuung1;animation-duration:1.6s;-webkit-animation-duration:1.6s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.run-right4{animation-name:hieuung1;-webkit-animation-name:hieuung1;animation-duration:2s;-webkit-animation-duration:2s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
@keyframes hieuung1{0%{opacity:0;transform:translateX(100%);}
0%{opacity:0;}
50%{opacity:0.3;transform:translateX(100%);}
100%{opacity:1;transform:translateX(0%);}
}
@-webkit-keyframes hieuung1{0%{opacity:0;-webkit-transform:translateX(100%);}
0%{opacity:0;}
50%{opacity:0.3;-webkit-transform:translateX(100%);}
100%{opacity:1;-webkit-transform:translateX(0%);}
}
@keyframes hieuung2{0%{opacity:0;transform:translateX(-100%);}
0%{opacity:0;}
50%{opacity:0.3;transform:translateX(-100%);}
100%{opacity:1;transform:translateX(0%);}
}
@-webkit-keyframes hieuung2{0%{opacity:0;-webkit-transform:translateX(-100%);}
0%{opacity:0;}
50%{opacity:0.3;transform:translateX(-100%);}
100%{opacity:1;-webkit-transform:translateX(0%);}
}
.content-img2{animation-name:pic2;-webkit-animation-name:pic2;animation-duration:1s;-webkit-animation-duration:1s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible !important;}
.pullUp2{animation-name:pullUp2;-webkit-animation-name:pullUp2;animation-duration:2s;-webkit-animation-duration:2s;animation-timing-function:ease-out;-webkit-animation-timing-function:ease-out;transform-origin:50% 100%;-ms-transform-origin:50% 100%;-webkit-transform-origin:50% 100%;}
@keyframes pullUp2{0%{opacity:0;transform:scaleY(0.1);}
50%{opacity:0.1;}
100%{opacity:1;transform:scaleY(1);}
}
@-webkit-keyframes pullUp2{0%{opacity:0;-webkit-transform:scaleY(0.1);}
50%{opacity:0.1;}
100%{opacity:1;-webkit-transform:scaleY(1);}
}
@keyframes pic2{0%{opacity:0;transform:translateX(-150%);}
100%{opacity:1;transform:translateX(0%);}
}
@-webkit-keyframes pic2{0%{opacity:0;-webkit-transform:translateX(-150%);}
100%{opacity:1;-webkit-transform:translateX(0%);}
}

Jquery

Code:
function scrollMouse(classFirst, nameClassAdd) {
    $(classFirst).addClass('hidden');
    $(classFirst).each(function() {
        var spaceTop = $(this).offset().top;
        var chieucao = $(this).height();
        var spaceBottom = $(document).height() - $(this).offset().top - chieucao;
        var scrollBottom = $(document).height() + $(window).height() - $(window).scrollTop();
        var scrollSpaceTop = $(window).scrollTop();
        if ((spaceBottom < scrollBottom - $(window).height()) && (spaceTop < scrollSpaceTop + $(window).height())) {
            $(this).addClass(nameClassAdd);
        }
        else{
            $(this).removeClass(nameClassAdd);
        }
    });
}
function scrollMouse1(classFirst, nameClassAdd) {
    $(classFirst).addClass('hidden');
    $(classFirst).each(function() {
        var spaceTop = $(this).offset().top;
        var chieucao = $(this).height();
        var spaceBottom = $(document).height() - $(this).offset().top - chieucao;
        var scrollBottom = $(document).height() + $(window).height() - $(window).scrollTop();
        var scrollSpaceTop = $(window).scrollTop();
        if ((spaceBottom < scrollBottom - $(window).height()) && (spaceTop < scrollSpaceTop + $(window).height())) {
            $(this).addClass(nameClassAdd);
        }
    });
}
var width = $(window).width();
if (width > 767) {
    $(window).scroll(function() {
        scrollMouse1('.topiclist li', 'slideLeft3');
        scrollMouse('.messageContent .lightbox', 'hieuung4');
    });
}

Cách sử dụng như sau


Code:
var width = $(window).width();
if (width > 767) {
    $(window).scroll(function() {
        scrollMouse1('.tenclass', 'slideLeft3');
        scrollMouse('.tenclass .lightbox', 'hieuung4');
    });
}

Đoạn cuối js như này có 2 loại scrollMouse và scrollMouse1 ( mình đã nói ở trên)
scrollMouse sẽ chọn class nào co class là "tenclass" thì sẽ thêm hiệu ứng vào. hiệu ứng thì ở css rùi các
bạn tự tìm hiểu hoặc xem ở đây :
Code:
 https://daneden.github.io/animate.css/

ở hotrofm thì mình dùng hiệu ứng scrollMouse1 chọn đối tượng class là .topiclist li



Thì mình sẽ viết là
Code:
var width = $(window).width();
if (width > 767) {
    $(window).scroll(function() {
        scrollMouse1('.topiclist li', 'slideLeft3');
    });
}


 Trả lời bài viết
avatar

anhsonpy10927
8
1
Invision
Thành viên mới
Thành viên mới

Bài viết :
7
Points :
8
Like :
1
Invision
Cho nó lướt nhanh nhanh tí đi mày...............................
 Trả lời bài viết
avatar

Admin274
548
95
Punbb
Quản trị
Việt đẹp trai
Founder
Founder

Bài viết :
274
Points :
548
Like :
95
Punbb
Quản trị
Việt đẹp trai
@anhsonpy1092 đã viết:Cho nó lướt nhanh nhanh tí đi mày...............................

t nghĩ nhanh thế là được rùi. demo tý thôi, t xóa đi ngay ấy mà Smile)
 Trả lời bài viết
avatar

anhsonpy10927
8
1
Invision
Thành viên mới
Thành viên mới

Bài viết :
7
Points :
8
Like :
1
Invision
Chắc là *** làm được nên giả vờ nói thế.....................................
 Trả lời bài viết
avatar

Admin274
548
95
Punbb
Quản trị
Việt đẹp trai
Founder
Founder

Bài viết :
274
Points :
548
Like :
95
Punbb
Quản trị
Việt đẹp trai
@anhsonpy1092 đã viết:Chắc là *** làm được nên giả vờ nói thế.....................................

không gì là không thể nhé :)
 Trả lời bài viết
avatar

anhsonpy10927
8
1
Invision
Thành viên mới
Thành viên mới

Bài viết :
7
Points :
8
Like :
1
Invision
Thế làm thử đi bố xem nào . Đm tận 40 ký tự 40 40 40 40 40 40
 Trả lời bài viết

Sponsored content

 Trả lời bài viết
Điểm 4.6/5 dựa vào 87 đánh giá