Question

我目前正在探索scrollorama jquery插件（http://johnpolacek.github.io/scrollorama/）

到目前为止一切顺利，它是一个很好的插件，但它不能满足我的确切需求。因为这是我的想法：当访问者滚动到某个div时（假设我们得到了下一个值：blockIndex = 1），我希望顶栏有动画效果。但是我可以通过scrolllorama真正找到的是让我们刚刚滚动到的div中发生的事情发生。

我认为我有一个简单的解决方法（其中var I =当前的blockindex数），写作： if（i！='1'）{ $（“。top”）。animate（{opacity：0.25，left：“+ = 50”，height：“toggle”}，5000，function（）{}）; };

它没有显示任何结果，也没有在互联网上找到任何解决方案。那么我基本上在寻找什么呢？有或没有卷轴的解决方案（非常棒），我可以跟踪当前的bloxindex数字并用它来动画网站中的其他元素。

我不确定这是否有效，但我希望找到答案！

干杯，

瑞克

Answer 1

嘿Rick我遇到了同样的问题并且有一个简单的方法，但它不是卷轴问题。我还建议使用http://johnpolacek.github.io/superscrollorama/，因为它稍微更新一些。

Greensock无论好坏，都会将jquery操作的范围限制在用于动画的$ this参数的范围内，以防止出现问题。通过设置您正在调用的函数的范围，可以解决这个问题。

我通过将jquery这个元素的范围设置为页面的不同部分来解决这个问题。在我的例子中，我使用了与补间相同的位置，但在实践中，您可以将范围设置为任何有效的jquery选择器。您需要确保使用最新的greensock插件。可以在http://api.greensock.com/js/

找到其他文档

var timeLine1 = new TimelineLite({align: "sequence"})
.append([TweenMax.to($('#display-platform-list .frame-1'), 2, {css:{display:'block'},onUpdate:removeSiblings,onUpdateScope:$('#display-platform-list .frame-1')})])
.append([TweenMax.to($('#display-platform-list .frame-2'), 2, {css:{display:'block'},onUpdate:removeSiblings,onUpdateScope:$('#display-platform-list .frame-2')})])
.append([TweenMax.to($('#display-platform-list .frame-3'), 2, {css:{display:'block'},onUpdate:removeSiblings,onUpdateScope:$('#display-platform-list .frame-3')})])
.append([TweenMax.to($('#display-platform-list .frame-4'), 2, {css:{display:'block'},onUpdate:removeSiblings,onUpdateScope:$('#display-platform-list .frame-4')})])
.append([TweenMax.to($('#display-platform-list .frame-5'), 2, {css:{display:'block'},onUpdate:removeSiblings,onUpdateScope:$('#display-platform-list .frame-5')})])
.append([TweenMax.fromTo( $('#platform .callout'), 1, {css:{opacity: 1}}, {css:{opacity: 0}})]);

function removeSiblings(){
    $(this).siblings().hide();
}

使用scrollorama更改/动画不同的div

1 个答案: