頁面滾動時的平滑自然運動

Question

我是JS中的新手。現在我正在處理一個效果，當我第一次頁面滾動時，然後自然動畫動畫開始，但它創建一個問題，因爲當我滾動元素動畫變得快。

檢查這個你有更多的想法。

http://jsfiddle.net/byvLy/

Answer 1

我知道這是一個擺動箱（想通了由於Math.sin()）

但是，你必須要注意的是滾動事件滾動期間每隔幾毫秒解僱。在您的代碼中，每次觸發滾動事件時，都會調用動畫並創建一個間隔。這就是爲什麼你的動畫很刺激;

try this instead：

$(function() { 

    $(window).on('scroll', function() { 
     swing.start('.cloud1, .cloud2'); 
    }); 

    var swing = (function() { 
     var animated = false; 

     function startAnimation(selector) { 
      if (!animated) { 
       var banner = $(selector); 
       var start = 0; 

       animated = true; 
       window.setInterval(function() { 
        banner.css('left', 100 * Math.sin(start) + 80); 
        start += 0.1; 
       }, 30); 
      } 
     } 
     return { 
      start: startAnimation 
     } 
    }()); 
});​