通過滾動觸發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()); 
});