jQuery - Smooth page scrolling với TweenMax

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="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="http://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ẻ <script>



$(function(){ 

        var $window = $(window);
 var scrollTime = 1.2;
 var scrollDistance = 170;

 $window.on("mousewheel DOMMouseScroll", function(event){

  event.preventDefault(); 

  var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
  var scrollTop = $window.scrollTop();
  var finalScroll = scrollTop - parseInt(delta*scrollDistance);

  TweenMax.to($window, scrollTime, {
   scrollTo : { y: finalScroll, autoKill:true },
    ease: Power1.easeOut,
    overwrite: 5       
   });

 });
});


Nếu bạn muốn cuộn nhanh hơn, tăng biến scrollTime lên với số thích hợp, còn muốn chậm lại thì giảm nó xuống.

Code: Download Files | View Demo



Chúc bạn thành công!

Related