jQuery视差教程？

Question

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

Answer 1

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

• 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 2

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

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

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