滚动时触发动画的整页滚动答案

【问题标题】：Full page scroll with animations triggered on scroll滚动时触发动画的整页滚动
【发布时间】：2015-07-21 10:41:14
【问题描述】：

我已经尝试完成this 大约两个星期了。这里有没有人知道如何做到这一点？我什至不会粘贴我的代码，因为这是有史以来最糟糕的。

谢谢。

【问题讨论】：

【解决方案1】：

你检查fullpage.js了吗？

您可以通过使用 CSS Easing Animation Tool of Matthew Lein 创建自己的 CSS3 函数来获得相同的滚动效果。

然后将其传递给fullPage.js的参数easingcss3。

easingcss3: 'cubic-bezier(1.000, 0.000, 0.000, 1.005) 0.5s',

或者，如果您愿意，可以选择jQuery easing effects 并使用css3:false。（虽然用css3会更流畅）

关于在滚动时消失的元素，您必须通过在诸如onLeave 之类的回调上为它们设置动画或使用添加到主体的类作为in this example 自行完成。

body.fp-viewing-page2-slide1 #section1 .moveOut{
    transform: translate3d(0, -400px, 0);
}

this line 中的某些内容。

【讨论】：

嗯，你做的看起来比我两周做的好十倍。我实际上尝试使用您的插件并且滚动按预期工作。它只是触发动画，那是一团糟。问题在于元素已经在 DOM 中，但在视口中不可见，并且不知道何时添加动画类。我尝试过使用航路点，但只触发一两个动画似乎过于复杂。
另外，我非常感谢您的所有工作。真佩服。