新的Google日历着陆页滚动

Question

我尝试创建类似于新的Google日历着陆页的网页http://www.google.com/landing/calendar/

我正在使用skrollr（https://github.com/Prinzhorn/skrollr），但我无法在google登录页面上获得正确的效果，如果您执行小滚动，它会将您发送到下一个块并使用skrollr我无法获得导航功能。我有什么想法可以重现那个？是否可以使用skrollr或者你会推荐另一个js插件？

谢谢！

Answer 1

如果您自己还没有找到解决方案，我的任务就是完成类似的事情。有两种方法可以实现这一点，我研究和选择正确的方法主要取决于您的设计/预期结果的复杂性。很遗憾，我无法提供链接，因为该网站将在未来几周内无法使用。

这对我有用：

我使用fullpage.js库来实现“整页”滚动效果。您还可以查看onepage-scroll.js并查看哪一个最适合您 - 但它们在功能方面没有太大差异。

使用fullpage.js（以及其他内容）的好处：

• 集成快速而简单
• 允许通过options hash进行大量自定义
• 在滚动到另一个部分时（在其发生之前或之后）提供回调
• 使您可以通过'methods'
手动触发滚动
• 在iPad / iPhone上的表现非常出色。可能在其他移动设备上，虽然我不能完全确认，因为那 不是我的项目的要求。

现在，当你进行了部分到部分的滚动时，缺少的是动画。 考虑到fullpage.js为您提供回调，它就像在转换到另一个部分/幻灯片时添加类一样简单，然后使用该类通过CSS触发您选择的动画。这是什么对我有用而不会遇到重大问题。

更高级的内容：

如果您希望构建更复杂的内容，我强烈建议您查看tween.js。这是Google在您提问的着陆页上使用的内容。

这是一个非常强大的工具，因此它需要相当多的设置+它将动画移动到javascript，这可能是一个麻烦。我宁愿把它们保存在CSS所属的地方，也不要使用javascript直到我真的需要。

---

FYI我也开始使用skrollr，但它不能真正使用'全页滚动'，因为它真正做的是禁用滚动和通过翻译动画body / html。 Skrollr将它的行为基于滚动事件，如果您使用我提议的库，它将不会触发。

修改 看来你实际上可以使用skrollr与fullpage.js相提并论。您可以在FAQ site中看到答案。感谢Alvaro进行擒抱！即使这样，我也不会使用skrollr，除非你真的需要它来获得一些先进的视差滚动效果 - 如前所述，取决于你的需求。 ：）

如果您有任何疑问或在我的回答中有些不明确的地方，请告诉我。

祝你好运！