Glatte natürliche Bewegung, wenn Seite blättern

Question

Ich bin ein Neuling in JS. Im Moment arbeite ich an einem Effekt, bei dem ich will, wenn die Seite zuerst scrollt, dann beginnt die natürliche Bewegungsanimation, aber es erzeugt ein Problem, denn wenn ich scrolle, wird die Elementanimation schnell.

Überprüfen Sie diese mehr Sie haben die Idee.

http://jsfiddle.net/byvLy/

Answer 1

ich weiß, dass dies ein Schwingkasten (es aufgrund der Math.sin() heraus)

jedoch müssen Sie beachten, dass Ereignis Scrollen wird beim Scrollen alle paar Millisekunden gebrannt. In Ihrem Code rufen Sie animate auf und erstellen jedes Mal ein Intervall, wenn das scroll-Ereignis ausgelöst wird. deshalb ist deine Animation nervös;

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