新的谷歌日历登陆页面滚动

Question

我试图创建一个类似于新的谷歌日历的着陆页页http://www.google.com/landing/calendar/

我使用skrollr（https://github.com/Prinzhorn/skrollr），但我不能得到正确的效果，对谷歌登陆页面，如果你做一个小滚动它会发送你到下一个块和skrollr我无法获得导航。任何想法如何我可以重现呢？有可能与skrollr做，或者你会推荐另一个JS插件？

谢谢！

Answer 1

如果你还没有找到解决方案，我一直负责做一个非常类似的事情。有两种方法可以实现我研究并选择正确的方法，这主要取决于您设计的复杂程度/预期结果。很抱歉，我无法提供链接，因为该网站在接下来的几周内不会运行。

这是对我工作：

我以前fullpage.js图书馆实现“整版”滚动效果。你也可以看看onepage-scroll.js，看看哪一个最适合你 - 尽管它们在功能上并没有太大差别。

优势利用fullpage.js（除其他事项外）的：

• 整合是快速，简单
• 允许通过选择大量的定制散列
• 提供回调时滚动到另一节（在它发生之前或之后）
• 使您能够通过'方法'手动触发滚动
• 工作意外在iPad/iPhone上非常好。也许在其他移动设备上，虽然我不能完全确认，因为 不是我的项目的要求。

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

对于更高级的东西：

如果你正在寻找建立更复杂的东西，那么我强烈建议你看看tween.js。这是谷歌在您提问的目标网页上使用的内容。

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

---

FYI我也开始skrollr但它不会因为它确实是禁用滚动和身体动画/ HTML通过翻译与“全页滚动”真正发挥作用。Skrollr建立在滚动事件上的行为，如果您使用我建议的库，它将不会触发。

编辑： 看来，你也可以在参数与fullpage.js实际使用skrollr。你可以看到如何在FAQ site的答案。感谢Alvaro的隐藏！即使那样，我也不会使用skrollr，除非你真的需要它来获得一些先进的视差滚动效果 - 就像之前所说的那样，这取决于你的需求。 :)

让我知道如果您有任何疑问或某事不清楚在我的答案。

祝你好运！