对于视差滚动(Parallax Scrolling),关注网页设计的朋友都不会陌生。在网页设计中,视差滚动是一种很特别的网页设计技术,通过让多层背景以不同的速度或者不同的方向移动形成 3D 运动效果,有很强的视觉冲击力。

前阵子视差被用来提供一个漂浮在屏幕周围的元素,有很多的网站使用这种效果,有点势不可挡的趋势。如今,“少即是多”的概念也被应用于视差效果中。下面你看到的16个网站案例是基于视差滚动技术实现的,一起欣赏。

### [Baylie WordPress Theme][1]

[![17 Inspiring Examples of Parallax Scrolling Sites](http://webdesignledger.com/wp-content/uploads/2013/10/parallax01.jpg)](http://themetrust.com/demos/baylie/)

### [Broken Twill][2]

[![17 Inspiring Examples of Parallax Scrolling Sites](http://webdesignledger.com/wp-content/uploads/2013/10/parallax02.jpg)](http://brokentwill.co.uk/)

### [theQ camera][3]

[![17 Inspiring Examples of Parallax Scrolling Sites](http://webdesignledger.com/wp-content/uploads/2013/10/parallax03.jpg)](http://www.theqcamera.com/)

### [Scytale][4]

[![17 Inspiring Examples of Parallax Scrolling Sites](http://webdesignledger.com/wp-content/uploads/2013/10/parallax05.jpg)](http://scytale.pt/)

### [Srgint][5]

[![17 Inspiring Examples of Parallax Scrolling Sites](http://webdesignledger.com/wp-content/uploads/2013/10/parallax06.jpg)](http://www.srgint.com/)

### [Cyclemon][6]

[![17 Inspiring Examples of Parallax Scrolling Sites](http://webdesignledger.com/wp-content/uploads/2013/10/parallax07.jpg)](http://cyclemon.com/)

### [Sojourn Network][7]

[![17 Inspiring Examples of Parallax Scrolling Sites](http://webdesignledger.com/wp-content/uploads/2013/10/parallax08.jpg)](http://sojournnetwork.com/)

### [This is Now][8]

[![17 Inspiring Examples of Parallax Scrolling Sites](http://webdesignledger.com/wp-content/uploads/2013/10/parallax09.jpg)](http://www.thisisnowexhibition.com/)

### [l’unita][9]

[![17 Inspiring Examples of Parallax Scrolling Sites](http://webdesignledger.com/wp-content/uploads/2013/10/parallax10.jpg)](http://lunita.ca/)

### [Fall in Tennessee][10]

[![17 Inspiring Examples of Parallax Scrolling Sites](http://webdesignledger.com/wp-content/uploads/2013/10/parallax11.jpg)](http://fall.tnvacation.com/)

### [Made by Block][11]

[![17 Inspiring Examples of Parallax Scrolling Sites](http://webdesignledger.com/wp-content/uploads/2013/10/parallax12.jpg)](http://www.madebyblock.com/)

### [Kill your Darlings][12]

[![17 Inspiring Examples of Parallax Scrolling Sites](http://webdesignledger.com/wp-content/uploads/2013/10/parallax13.jpg)](http://sonyclassics.com/killyourdarlings/)

### [WAAAC][13]

[![17 Inspiring Examples of Parallax Scrolling Sites](http://webdesignledger.com/wp-content/uploads/2013/10/parallax14.jpg)](http://waaac.co/)

### [Spotify][14]

[![17 Inspiring Examples of Parallax Scrolling Sites](http://webdesignledger.com/wp-content/uploads/2013/10/parallax15.jpg)](https://www.spotify.com/us/)

### [Serve Seattle][15]

[![17 Inspiring Examples of Parallax Scrolling Sites](http://webdesignledger.com/wp-content/uploads/2013/10/parallax16.jpg)](http://serveseattle.org/#slide-two)

### [Codetex][16]

[![17 Inspiring Examples of Parallax Scrolling Sites](http://webdesignledger.com/wp-content/uploads/2013/10/parallax17.jpg)](http://www.codetex.com/)

### [Betty and Betty][17]

[![](http://images.cnitblog.com/blog/36987/201310/12152357-1cfc59b48e084eb1ab2010d3d86b1a20.jpg)](http://www.bettybetty.de/)

[1]: http://themetrust.com/demos/baylie/
[2]: http://brokentwill.co.uk/
[3]: http://www.theqcamera.com/
[4]: http://scytale.pt/
[5]: http://www.srgint.com/
[6]: http://cyclemon.com/
[7]: http://sojournnetwork.com/
[8]: http://www.thisisnowexhibition.com/
[9]: http://lunita.ca/
[10]: http://fall.tnvacation.com/
[11]: http://www.madebyblock.com/
[12]: http://sonyclassics.com/killyourdarlings/
[13]: http://waaac.co/
[14]: https://www.spotify.com/us/
[15]: http://serveseattle.org/#slide-two
[16]: http://www.codetex.com/
[17]: http://www.bettybetty.de/
[18]: http://webdesignledger.com/inspiration/17-inspiring-examples-of-parallax-scrolling-sites