找到一个网站http://www.boy-coy.com/#home。当你向下滚动时,所有的内容都滚动得非常平滑。即使你快速滚动,滚动也是以特定的速度完成的。这使得网站更快,响应更快。如何在css和jquery的帮助下实现这一点?
乍一看
试着阅读他们的html源代码输出。
- 他们使用一些jquery插件和旧浏览器js插件调用。
- 他们有一个自定义的和部分模糊的。js脚本,这是在深度,但你可以看到它在页面中的项目上设置的特定属性。
- 排除任何使用条款问题,您可以通过使用此示例代码作为示例来破译此页面的酷滚动技术。但是从头开始编写或在这里发布整个解决方案绝对是相当多的工作。
- 我要去找一个小一点的例子,不像这个视差那么复杂。
- 并查看此链接http://codepen。它有一些开始的原则,一些图像定位在不同的位置,当你滚动视窗。
- 这个链接在SO也可以帮助我可以改变滚动速度使用css或jQuery?
- Kirupa有一个很好的教程,可以帮助你获得平滑的滚动效果。http://www.kirupa.com/html5/smooth_parallax_scrolling.htm
- 这个非常棒。我想我会研究一下这个演示。一定要在这里测试所有的点击事件演示。我相信你可以在滚动条的jquery渐变事件中加入http://plugins.compzets.com/animatescroll/
- 另一个不错的例子http://bassta.bg/demos/smooth-page-scroll/
这叫做视差,
检查:http://www.w3schools.com/howto/howto_css_parallax.asp
http://matthew.wagerfield.com/parallax/