Гладкое естественное движение при прокрутке страницы

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 
     } 
    }()); 
});​