Add moving effect on scroll to site

Question

I have tryed this code in my site simmona.uchenici.bg/test/ and the result is that the effect don't stop. I want scrolling effect to stop when the section title is on bottom of the window and only image section to continue while they catch up. Also I don't know why my pic is zooming on scroll... How to debug that?

$(document).ready(function(){
$(document).bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /680 > 0) {
  $('#textbox').animate({
    'marginTop' : "+=50px" 
  });
}
else {
  $('#textbox').animate({
    'marginTop' : "-=10px" 
  });
}

});

$(document).bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /680 > 0) {
  $('#image').animate({
    'marginTop' : "+=50px" 
  });
}
else {
  $('#image').animate({
    'marginTop' : "-=5px" 
  });
}`}); 

});`

Answer 1

You don't queue your animations. What happens right now is you scroll up, down, up down... but animation doesn't stop, while you already give new orders by scrolling. In order to fix that check .stop documentation for further use.

 $(document).ready(function(){ $(document).bind('mousewheel', function(e){ if(e.originalEvent.wheelDelta / 680 > 0) { $('#textbox').stop(true, false).animate({ /* 1) applied stop(true, false)*/ 'marginTop' : "+=50px" }, 1000, function(){}); }else { $('#textbox').stop(true, false).animate({ /* 2) applied stop(true, false)*/ 'marginTop' : "-=50px" }, 1000, function(){}); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p id="textbox"> SOME TEXT</p>