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

  • the_dav

    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');
        });
    }


  • anhsonpy1092
    Cho nó lướt nhanh nhanh tí đi mày...............................


    --Chữ ký--
    anh em cờ lích vào đây để em lấy traffic nhé :* http://phongkhamphukhoahn.com/
  • Admin
    @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)

  • anhsonpy1092
    Chắc là *** làm được nên giả vờ nói thế.....................................


    --Chữ ký--
    anh em cờ lích vào đây để em lấy traffic nhé :* http://phongkhamphukhoahn.com/
  • Admin
    @anhsonpy1092 đã viết:Chắc là *** làm được nên giả vờ nói thế.....................................

    không gì là không thể nhé :)

  • anhsonpy1092
    Thế làm thử đi bố xem nào . Đm tận 40 ký tự 40 40 40 40 40 40


    --Chữ ký--
    anh em cờ lích vào đây để em lấy traffic nhé :* http://phongkhamphukhoahn.com/
  • Sponsored content

Thông tin tác giả
avatar
MEM LV3
Bài viết :
222
Points :
319
Like :
47
Punbb
Quản trị
Xem lý lịch thành viên
Thông tin tác giả
avatar
MEM
Bài viết :
7
Points :
8
Like :
1
Invision
Xem lý lịch thành viên
Thông tin tác giả
avatar
ACP
Bài viết :
329
Points :
636
Like :
106
Punbb
Quản trị
Status :
test
Xem lý lịch thành viên http://hotrofm.forumvi.com
Thông tin tác giả
avatar
MEM
Bài viết :
7
Points :
8
Like :
1
Invision
Xem lý lịch thành viên
Thông tin tác giả
avatar
ACP
Bài viết :
329
Points :
636
Like :
106
Punbb
Quản trị
Status :
test
Xem lý lịch thành viên http://hotrofm.forumvi.com
Thông tin tác giả
avatar
MEM
Bài viết :
7
Points :
8
Like :
1
Invision
Xem lý lịch thành viên
Thông tin tác giả
Sponsored content
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết