javascript - 新的谷歌日历登录页面滚动

Question

我正在尝试创建一个类似于新的谷歌日历登陆页面 http://www.google.com/landing/calendar/ 的页面

我正在使用 skrollr( https://github.com/Prinzhorn/skrollr ) 但我无法获得正确的效果，在谷歌登陆页面上，如果你做一个小滚动，它会将你带到下一个 block ，而使用 skrollr 我无法得到那个导航。有什么想法可以重现吗？是否可以使用 skrollr 或者您会推荐另一个 js 插件？

谢谢!

Answer 1

如果您自己仍然没有找到解决方案，我的任务是做一件非常相似的事情。我研究了两种实现此目的的方法，选择正确的方法主要取决于您的设计/预期结果的复杂性。遗憾的是，我无法提供链接，因为该网站在接下来的几周内将无法上线。

这对我有用:

我用了fullpage.js实现“整页”滚动效果的库。你也可以看看 onepage-scroll.js看看哪一个最适合您 - 不过它们在功能方面并没有太大区别。

使用 fullpage.js 的好处(除其他外):

• 集成快速简单
• 允许通过选项散列进行大量自定义
• 在触发滚动到另一个部分时提供回调(发生之前或之后)
• 使您能够通过“方法”手动触发滚动
• 在 iPad/iPhone 上的表现出奇的好。可能在其他移动设备上也是如此，尽管我无法完全确认不是我元素的要求。

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

对于更高级的东西:

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

这是一个非常强大的工具，因此需要相当多的设置 + 它将动画移动到 javascript，这可能很麻烦。我宁愿将它们保留在它们所属的 CSS 中，并且在我真正需要之前不要使用 javascript。

---

仅供引用，我也是从 skrollr 开始的，但它不会真正与“整页滚动”一起使用，因为它真正做的是通过翻译禁用滚动和动画 body/html。 Skrollr 的行为基于滚动事件，如果您使用我建议的库，该事件将不会触发。

编辑:看来您实际上可以使用与 fullpage.js 相当的 skrollr。您可以在 FAQ site 中查看答案。 .感谢Alvaro为了澄清这一点!即使那样，我也不会使用 skrollr，除非你真的需要它来实现一些高级视差滚动效果——如前所述，这取决于你的需要。 :)

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

祝你好运!