滚动视差网站工具与教程

滚动视差绝对是今年最炫的设计风格，也是最近的设计趋势，之前我们分享了《60多个超炫的视差滚动效果网站设计欣赏》相信让很多人都耳目一新，现在整理几个比较不错的开源滚动视差项目，它们大都托管在github上，大家可以用在自己的项目中，当然，从中获取灵感自己开发会更好～～

scrollorama

curtain.js

jquery-parallax

stellar.js

jparallax

skrollr

parallax.js

a simple parallax scrolling technique via nettuts+

恩，先就这些，如果你有发现其它关于滚动视差的开源项目或实现教程，欢迎与我们分享。

整理自：http://webdesignledger.com/tools/parallax-tools-and-techniques
中文原文：滚动视差网站工具与教程
请尊重版权，转载请注明来源，多谢～～

作者: 神飞
爱好前端设计与开发，崇尚一目了然的设计。现居深圳，就职于腾讯isux团队 follow me on twitter @qianduan。

12 个评论

• 

  whatuwant 发表于dec 6, 2012 at 09:06

  很好很强大！

  回复
• 

  javin 发表于dec 8, 2012 at 10:15

  视差滚动效果的确很炫，但需要很良好的设计理念在做支撑。否则就变得不伦不类了。

  回复
• 

  小壮 发表于dec 8, 2012 at 16:49

  可惜，可怕并可悲的 ie6 ，全部失败……

  回复
• 

  一堵墙 发表于dec 9, 2012 at 12:01

  喜欢这个

  回复
• 

  hidelife 发表于jan 10, 2013 at 12:10

  http://jarallax.com/?page=home
  推荐这个视差插件，个人觉得比上面介绍的几个来的都好

  回复
• 

  a.l. 发表于jan 16, 2013 at 15:06

  正想起部门老大之前说的一个效果~没想到这边就直接找到了~
  顶起~
  感觉这玩意，得要点设计能力，不然玩不转吧？

  回复
• 

  yang 发表于jan 18, 2013 at 11:31

  有个问题早就想说的了, 为什么这个网站没有那个”回到顶部”的按钮啊 .. 建议加上~

  回复
  • 

    神飞 发表于jan 21, 2013 at 17:17

    好建议，这次改版的时候加上。

    回复
• 

  粉末 发表于mar 13, 2013 at 21:17

  http://3yew.com/parallaxscroller/
  我自己模仿别人做了个简单的案例，原理是绑定scroll事件计算背景位移，可是会出现背景闪动现象，我看别人写的也去看他们的代码好像实现也是这样的，不明白为什么别人的动画很流畅而我背景位移时会闪动，首先问题肯定不是性能上的问题，有人提醒缓动处理，可是我发现没有添加缓动的入口，我之前也一直在想是哪里没加缓动了，可是没地方可以加，因为每次滚动都必须得立马把背景定位过去，否则就跟滚动条不同步了，如果有空帮我指点迷津下，谢谢了

  回复
  • 

    粉末 发表于mar 14, 2013 at 20:24

    问题已解决谢谢

    回复
    • 

      粉末 发表于apr 8, 2013 at 19:42

      额，忘记说下解决方案，这边补充下，之前我的做法都错了，主要问题在css上，因为那时候不知道background-attachment: fixed;这个东西，所以用上这家伙后scroll算法稍微修改下就可以了。

      回复
• 

  wendell 发表于apr 21, 2013 at 10:22

  自己对视差原理进行了一些剖析，也有一些自己对这方面的理解，交流下心得http://blog.webql.info/768

  回复

请扫描上面的二维码
或者在微信中搜索"iqianduan"添加好友