通过滚动触发 div 动画答案

【问题标题】：Triggering a div animation by scrolling通过滚动触发 div 动画
【发布时间】：2012-07-23 19:21:03
【问题描述】：

我正在开发一个水平滚动的网站。该网站有一个大的背景图片（5000 像素宽）。现在，我的 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;}

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

});

【问题讨论】：

其实很简单，获取窗口宽度并计算出 100% 是多少，然后其余的百分比应该直接以像素为单位，并将其与滚动的多少进行比较像素等。但没有任何代码，甚至没有尝试，没有人会为你写。

标签： jquery html scroll jquery-animate

【解决方案1】：

您可以监听滚动事件，然后根据scrollLeft() 进行计算，如下所示：

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

【讨论】：

如果我使用这个 ScrollTo 插件，这仍然有效吗？我附上了一些代码来展示它是如何被处理的。

【解决方案2】：

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

【讨论】：