通过滚动触发div动画

Question

我在一个水平滚动的网站上工作。该网站有一个大背景图片（宽度为5000px）。现在，我有div的目前正在显示的内容：隐藏。我知道如何淡入，但我需要它们动态地进入视图，当我向右滚动时，我想用百分比触发这些div。

示例：用户开始向右滚动，一旦它们达到20％宽度，第一个div进入视图（从右边）。然后用户继续滚动，直到它们的宽度达到40％，第一个div动起来（向左），然后下一个div进入视图（从右侧）。

任何想法如何用jQuery完成此任务？

这里有一段代码...目前我有链接触发一些基本的动画。但没有任何手动滚动。哦，即时通讯使用这个伟大的插件称为ScrollTo的百分比。

HTML

<div id="eat" class="sections"> 
<div class="content"> 
</div> 
</div> 

<div id="see" class="sections"> 
<div class="content"> 
</div> 
</div> 

<div id="meet" class="sections"> 
<div class="content"> 
</div> 
</div> 

<div id="find" class="sections"> 
<div class="content"> 
</div> 
</div> 

<div id="background"> 
<img src="images/test.jpg" alt="" id="bg" /> 
</div> 

CSS

.sections {position:absolute; right: 0; width:700px; height: 100%; min-height: 650px; z-index: 10; background-color: rgb(0,0,0);} 
#drink, #eat, #see, #meet, #find {margin: 0px; padding: 0px;} 
.content {margin: 20px; padding: 0px; outline: 1px solid red;} 
h1 {color:#FFF; margin: 10em auto 0px auto;} 
#background {height:103%; min-height: 670px; overflow-x: scroll; overflow-y: hidden; z-index: 9;} 
#background img#bg {height: 100%; min-height: 650px; margin: 0px; padding: 0px;} 

JS

$("document").ready(function() { 

$('#link1').click(function(){ 
    $('#background').scrollTo('20%', 1500); 
     var div = $('#drink'); 
     div.animate({right: $(window).width()/2 - div.outerWidth()/2}, {duration: 1500, queue: false}, function() { 
     }); 
     $('#logo, #eat, #see, #meet, #find').fadeOut(500);   
     $('#drink').fadeIn(500); 
}); 

$('#link2').click(function(){ 
    $('#background').scrollTo('40%', 1500); 
     var div = $('#eat'); 
     div.animate({right: $(window).width()/2 - div.outerWidth()/2}, {duration: 1500, queue: false}, function() { 
     }); 
     $('#logo, #drink, #see, #meet, #find').fadeOut(500); 
     $('#eat').fadeIn(500); 
}); 

$('#link3').click(function(){ 
    $('#background').scrollTo('60%', 1500); 
     var div = $('#see'); 
     div.animate({right: $(window).width()/2 - div.outerWidth()/2}, {duration: 1500, queue: false}, function() { 
     }); 
     $('#logo, #drink, #eat, #meet, #find').fadeOut(500);     
     $('#see').fadeIn(500); 
}); 

$('#link4').click(function(){ 
    $('#background').scrollTo('80%', 1500); 
     var div = $('#meet'); 
     div.animate({right: $(window).width()/2 - div.outerWidth()/2}, {duration: 1500, queue: false}, function() { 
     }); 
     $('#logo, #drink, #eat, #see, #find').fadeOut(500); 
     $('#meet').fadeIn(500); 
}); 

$('#link5').click(function(){ 
    $('#background').scrollTo('100%', 1500); 
     var div = $('#find'); 
     div.animate({right: $(window).width()/2 - div.outerWidth()/2}, {duration: 1500, queue: false}, function() { 
     }); 
     $('#logo, #drink, #eat, #see, #meet').fadeOut(500); 
     $('#find').fadeIn(500); 
}); 

}); 

Answer 1

您可以监视jQuery中的scroll事件。这是另一个让您了解如何跟踪左侧和右侧滚动的答案。 https://stackoverflow.com/a/4308435/53007

Answer 2

您可以收听到滚动事件，然后根据scrollLeft()这样做你算了一笔账：

$(document).on('scroll', function() { 
    //do the math 
    console.log($(this).scrollLeft()); 
});