jQuery视差教程？

我需要在我为客户构建的网站中使用jquery parallax，我主要是一个后端开发人员，所以我正在学习更多关于前端和jquery等的内容。我遇到了一些例子，例如http：// www。 nikebetterworld.com/和教程然而我担心版权问题所以我想知道是否有人为初学者发现了一个可靠而简单的教程来创建视差效果？ 谢谢

Answer 1

我参加派对的时间已经很晚，但只是为了无耻的自我推销而在那里再扔一个:)，我几天前把一个简单的教程放在一起：

http://blog.fraser-hart.co.uk/jquery-parallax-scrolling/

如果您对此处有任何疑问，请随时给我留言，我可以通过您不确定的任何内容与您交谈。

Answer 2

一些教程，对于此主题中之前提到的任何内容感到抱歉：

• http://www.webdesignshock.com/one-page-website/
• http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/
• http://www.richardshepherd.com/smashing/parallax/background.html
• http://www.franckmaurin.com/the-parallax-effects-with-jquery/
• http://www.davecranwell.com/content/jquery-scroll-parallax-plugin
• http://jonraasch.com/blog/scrolling-parallax-jquery-plugin

一些可能有用的插件可以很好地处理视差：

• 在查看时加载内容： https ： //github.com/protonet/jquery.inview
• 航点： http ： //imakewebthings.com/jquery-waypoints/
• 横向滚动滑动内容： http ： //tympanus.net/codrops/2011/12/05/lateral-on-scroll-sliding-with-jquery/
• jQuery延迟动画： http ： //james.padolsey.com/javascript/jquery-delay-plugin/
• scrollTo： http ： //demos.flesler.com/jquery/scrollTo/
• 滚动路径： http ：//joelb.me/scrollpath/

我特别喜欢用于在滚动到视图时触发CSS3动画的inview插件。

并且，一些可爱的例子，更多的视差网站的灵感和代码窥探：

• http://www.mini.jp/event_campaign/big-point/
• http://www.kiinnostus.fi/autokuume/
• http://www.scozzese.com
• https://victoriabeckham.landrover.com/INT
• http://www.ws-interactive.fr/methode/
• http://swag2012.fr/
• http://activatedrinks.com/

http://www.awwwards.com似乎充满了视差网站。

Answer 3

一个快速的谷歌出现了这个。

http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/

Answer 4

试试这个:)真的很容易使用和自定义http://johnpolacek.github.com/scrolldeck.js/

Answer 5

我刚刚完成了一个只是j yesterday :)你应该考虑使用： http ：//johnpolacek.github.com/scrolldeck.js/或http://www.jarallax.com/demo/ （适用于android）#its a全新的项目，所以它仍在开发中

对于易于定制的滚动点，你可以使用它： http ：//cssdeck.com/labs/swayiqbq/2（它在覆盖默认滚动点时非常有用（在slidedeck.js中从幻灯片到幻灯片））

不确定你是在处理代码，还是在做图形和代码，如果它是第一个场景，你应该告诉你的设计师这个东西是如何工作的，以便真正使用视差效果。 此外，在一些情况下，使一切看起来像1920×1080和1024×768一样具有吸引力。

Answer 6

在这里，我收集了一些来自不同网站的最佳视差滚动教程，你可以从那里学习。 这是链接http://www.andwecode.com/tutorials/parallax-scrolling-tutorials/