我正在尝试创建一个类似于新的 Google 日历登录页面 http://www.google.com/landing/calendar/ 的页面
我正在使用 skrollr( https://github.com/Prinzhorn/skrollr )，但我无法获得正确的效果，在 google 登陆页面上，如果您进行小滚动，它会将您发送到下一个 block ，而使用 skrollr 我无法获取该导航。我有什么想法可以重现它吗？是否可以使用 skrollr 或者您会推荐另一个 js 插件？
谢谢!
最佳答案
如果您自己还没有找到解决方案，我的任务是做一件非常类似的事情。我研究了两种实现这一目标的方法，选择正确的方法主要取决于您设计/预期结果的复杂性。不幸的是，我无法提供链接，因为该网站在接下来的几周内不会上线。
这对我有用:
我用了fullpage.js库实现“全页”滚动效果。您还可以查看onepage-scroll.js看看哪一个最适合您 - 但它们在功能方面并没有太大差异。
使用 fullpage.js 的好处(除其他外):
- 集成快速而简单
- 允许通过选项哈希进行大量自定义
- 在触发滚动到另一个部分时(发生之前或之后)提供回调
- 使您能够通过“方法”手动触发滚动
- 在 iPad/iPhone 上运行得非常好。可能也在其他移动设备上，尽管我不能完全确认这一点 这不是我的元素的要求。
现在，当您进行了逐节滚动后，缺少的是动画。 考虑到 fullpage.js 为您提供了回调，就像在转换到另一个部分/幻灯片时添加一个类一样简单，然后使用该类通过 CSS 触发您选择的动画。什么对我有用而没有遇到重大问题。
对于更高级的东西:
如果您想要构建更复杂的东西，那么我强烈建议您查看 tween.js 。这是谷歌在您在问题中提供的着陆页上使用的内容。
这是一个非常强大的工具，因此需要相当多的设置+它将动画移动到 JavaScript，这可能会很麻烦。我宁愿将它们保留在它们所属的 CSS 中，并且在真正需要之前不要使用 javascript。
仅供引用，我也从 skrollr 开始，但它不能真正与“全页滚动”一起使用，因为它真正的作用是通过翻译禁用滚动和动画 body/html。 Skrollr 的行为基于滚动事件，如果您使用我建议的库，则不会触发该事件。
编辑: 看来您实际上可以将 skrollr 与 fullpage.js 一起使用。你可以在 FAQ site 中看到答案。 。感谢Alvaro为了澄清这一点!即便如此，我也不会使用 skrollr ，除非你真的需要它来实现一些高级的视差滚动效果 - 正如之前所说，这取决于你的需求。 :)
如果您有任何疑问或我的回答有不清楚的地方，请告诉我。
祝你好运!
关于javascript - 新的 Google 日历登陆页面滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26777694/