Trong tutorial này, mình sẽ hướng dẫn các bạn có được hiệu ứng cuộn trang 1 cách mượt mà. Hiện chức năng này có sẵn trên firefox, hay chrome,.. nhưng không phải Client nào cũng được bật chức năng này. Trong bài viết mình sẽ sử dụng TweenMax và ScrollToPlugin.
Ý tưởng
Ý tưởng khá đơn giản, ta sử dụng snippet này, bắt event lăn chuột và TweenMax và ScrollToPlugin để tạo hiệu ứng.
Code
Đầu tiên load các plugin jQuery, TweenMax và ScrollToPlugin, mình sử dụng các script từ các CDN sau:
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>
Hoặc bạn cũng có thể download source code ở cuối bài viết và upload lên hosting của bạn cũng được.
Và code của chúng ta, bạn có thể chèn trực tiếp vào trong thẻ head, cuối footer hay lưu thành file .js và include bằng thẻ