jQuery 视差教程？

jQuery parallax tutorial?

提问by green_arrow

I need to use a jquery parallax in a website I am building for a client, I am mainly a back end developer so I'm learning more about front end and jquery etc. I have came across examples such as http://www.nikebetterworld.com/and tutorials however I am worried about copyright issues so I was wondering if anyone had discovered a reliable and easy tutorial for beginners to create a parallax effect? Thanks

我需要在我为客户构建的网站中使用 jquery 视差，我主要是后端开发人员，所以我正在了解有关前端和 jquery 等的更多信息。我遇到过http://www等示例。 nikebetterworld.com/和教程但是我担心版权问题所以我想知道是否有人发现了一个可靠且简单的教程供初学者创建视差效果？谢谢

回答by DBUK

Some tutorials, sorry for any ones previously mentioned in this thread:

一些教程，对于本主题中先前提到的任何教程，我深表歉意：

• 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

• 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

Some, possibly, useful plugins that could work well with parallax:

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

• Load content when inview: https://github.com/protonet/jquery.inview
• Waypoints: http://imakewebthings.com/jquery-waypoints/
• Lateral on-scroll sliding content: http://tympanus.net/codrops/2011/12/05/lateral-on-scroll-sliding-with-jquery/
• jQuery delay animations: http://james.padolsey.com/javascript/jquery-delay-plugin/
• scrollTo: http://demos.flesler.com/jquery/scrollTo/
• Scrollpath: http://joelb.me/scrollpath/

• inview时加载内容：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/
• 滚动到：http: //demos.flesler.com/jquery/scrollTo/
• 滚动路径：http://joelb.me/scrollpath/

I particularly like the inview plugin for triggering CSS3 animations when scrolling into view.

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

And, some lovely examples of more parallax websites for inspiration and code snooping:

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

• 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.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.comseems to be overflowing with parallax websites.

http://www.awwwards.com似乎充斥着视差网站。

回答by Fraser

I'm very late to the party but just to throw another one in there for shameless self promotion :), I put a simple tutorial together a few days ago:

我参加聚会很晚了，但只是为了无耻的自我推销而再扔一个：)，几天前我整理了一个简单的教程：

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

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

If you've any questions about anything on there, feel free to pop me a message and I can talk you through anything you are unsure about.

如果您对那里的任何事情有任何疑问，请随时给我发消息，我可以与您讨论任何您不确定的事情。

回答by Undefined

A quick google turns up this.

一个快速的谷歌发现了这一点。

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

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

回答by mmln

I just finished working on one just jesterday :) you should consider using: http://johnpolacek.github.com/scrolldeck.js/or http://www.jarallax.com/demo/(works on android) #its a completely new project so its still being developed

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

for easily customizable scrollpoints you could use this: http://cssdeck.com/labs/swayiqbq/2(its quite useful while overriding default scrollpoints(which is from slide to slide in scrolldeck.js))

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

Not sure if youre working on code only, or youre doin both graphics and code, if its the first scenario, you should tutor your designer about how this thing works in order to really use parallax effect. Also, making everything look as appealing in 1920x1080 as in 1024x768 might be quire challenging in some cases.

不确定您是只处理代码，还是同时处理图形和代码，如果是第一种情况，您应该指导您的设计师了解这件事是如何工作的，以便真正使用视差效果。此外，在某些情况下，让所有内容在 1920x1080 和 1024x768 中看起来都具有吸引力可能是非常具有挑战性的。

回答by STEEL

try this too :) really easy to use and customize http://johnpolacek.github.com/scrolldeck.js/

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

回答by monkeytempal

Here i have collected some of the best parallax scrolling tutorials from different websites, you can learn from there. Here's the link http://www.andwecode.com/tutorials/parallax-scrolling-tutorials/

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