新的谷歌日历登录页滚动

如果您自己还没有找到解决方案，我的任务是做一件非常类似的事情。我研究了两种实现这一点的方法，选择正确的方法主要取决于你的设计/预期结果的复杂性。不幸的是，我无法提供链接，因为该网站在未来几周内不会上线。

这是对我有效的：

我使用fullpage.js库来实现"整页"滚动效果。您还可以查看onepage-roll.js，看看哪一个最适合您——不过它们在功能上没有太大区别。

使用fullpage.js的好处（除其他外）：

• 集成快速而简单
• 允许通过选项散列进行大量自定义
• 当触发滚动到另一个部分时（发生之前或之后）提供回调
• 使您能够通过"方法"手动触发滚动
• 在iPad/iPhone上效果出奇的好。可能也在其他移动设备上，尽管从那以后我无法完全确认不是我项目的要求

现在，当你有了逐节滚动，缺少的是动画考虑到fullpage.js为您提供了回调，这就像在转换到另一节/幻灯片时添加一个类，然后使用该类通过CSS触发您选择的动画一样简单这对我来说很有效，没有遇到重大问题。

对于更高级的东西：

如果你想构建更复杂的东西，那么我强烈建议你看看tween.js。这是谷歌在你的问题中提供的登录页上使用的内容。

这是一个非常强大的工具，因此它需要一些设置+它将动画移动到javascript，这可能会很麻烦。我宁愿把它们放在CSS中，直到我真正需要的时候才使用javascript

---

仅供参考，我也从skrollr开始，但它不会真正与"全屏滚动"一起工作，因为它真正做的是通过翻译禁用滚动和动画body/html。Skrollr将其行为建立在滚动事件上，如果您使用我提出的库，滚动事件将不会触发

编辑：看起来你实际上可以将skrollr与fullpage.js相提并论。你可以在它的常见问题解答网站上看到答案。感谢阿尔瓦罗这么说！即便如此，我也不会使用skrollr，除非你真的需要它来获得高级视差滚动效果——正如之前所说，这取决于你的需求。：）

如果你有任何疑问或我的回答不清楚，请告诉我。

祝你好运