如何实现此背景滚动效果? [英] How can I achieve this background scroll effect?
本文介绍了如何实现此背景滚动效果?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我非常喜欢每个背景部分相互重叠的方式,向下滚动。我已经看到它做了很多:
这里是链接: http://www.soleilnoir.net / believein /
I really like the way each background section overlaps each other which scrolling down. I have seen it done a lot: here is the link : http://www.soleilnoir.net/believein/
任何想法如何实现类似的效果?
Any ideas how to achieve the similar effect?
谢谢
推荐答案
此效果称为 parallax 。
以下是与此效果相关的一些链接:
Here are some links related to this effect:
- 来自Nike的精彩演示 http://www.nike.com/jumpman23/aj2012/
- 视差集合 http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design (确保看到每个例子,有些真的很棒!ex: http://benthebodyguard.com/index.php http://www.siebennull.com/ http://janploch.de/)
- Mercedez A类网站 http://a-class.mercedes-benz.com/com/en/index.html#!/?s=live (不是真正的视差,但仍然很棒)
- 关于如何使用视差效果制作图像滑块的教程 http://tympanus.net/codrops/2011/01/03/parallax-slider/
- 另一个具有不同效果的教程 http: //tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
- 要做视差的库 https://github.com/cameronmcefee/plax
- 另一个图书馆< a href =https://github.com/markdalgleish/stellar.js =noreferrer> https://github.com/markdalgleish/stellar.js
- a great demo from Nike http://www.nike.com/jumpman23/aj2012/
- a collection of parallax http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design (make sure to see each example, some are really great ! ex: http://benthebodyguard.com/index.php http://www.siebennull.com/ http://janploch.de/)
- Mercedez Class A web site http://a-class.mercedes-benz.com/com/en/index.html#!/?s=live (not really parallax but still great)
- a tutorial on how to make an image slider using parallax effect http://tympanus.net/codrops/2011/01/03/parallax-slider/
- another tutorial with different effects http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
- a library to do parallax https://github.com/cameronmcefee/plax
- another library https://github.com/markdalgleish/stellar.js
你可能也喜欢这个:
- http://johnpolacek.github.com/scrollorama/
- http://joelb.me/scrollpath/
这篇关于如何实现此背景滚动效果?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文