站点设计至尊 （展示文）

30个酷毙的交互式站点，原文地址：

http://webdesignerwall.com/trends/30-great-interactive-sites

我非常抱歉非常久没更新这个站点了。但不要操心，我还活着（在忙另外一个站点）。

今天我有个非常帅的主题要分享 — 30个酷毙的站点。

HTML5，CSS3。还有Javascript 让非常多绚丽的设计效果得以展示。如今的网页设计是能够非常有交互性的，已经不再被静态布局给限制住了。以下列出的这30个站点就是个非常不错的证明。它通过诸如音频和视频让传统效果变得酷炫。開始赞赏吧！

（译者注：最好备用多种浏览器来訪问）

01 Bienville Capital Management

http://www.bienvillecapital.com/

这个站点使用了页面无缝过渡效果。点击那些网页你就会发现跳转到别的网页基本是没有停顿的，由于网页通过褪色和滑行动画使得切换效果非常流畅。

02 Tool of North America

http://toolofna.com/

第一眼看到这个站点就认为太像一个Flash站点了，但它确实是仅仅由HTML5，CSS3和Javascript来实现的，并且动画效果超级平滑。由于使用了Ajax（对SEO一点都不友好），所以内容部分不能被搜索引擎索引到。假设你的浏览器不支持Javascript，就会仅仅出现一个黑色页面。

虽然这样的模式对SEO（译者注：搜索引擎排名技术）不友好，但它的交互效果太棒了，并且在手机浏览器的表现效果的是非常美丽的。

03 Whiteboard

http://whiteboard.is/

这个站点有着极好的背景模糊效果。

亲眼看下：当浏览器分辨率较低（或在手机设备），背景会有模糊效果，否则就是一组动画效果。

04 Cyclemon

http://cyclemon.com/ （译者注：打不开~）

简单美丽的滚动插图效果。

05 Mahedine Yahia

http://www.mahedineyahia.fr/

基本的背景动画由191张图片组成。当你浏览器往下滚动时就能看到独帧动画效果了。

06 Life of Pi 

http://journey.lifeofpimovie.com/

在这个站点浏览有更高水平的滚动独帧动画效果。假设你喜欢电影，那你会非常喜欢拖动这个站点的滚动条的。它使用独帧动画展示了变幻的背景材质，实现这个惊人的效果值须要用Javascript和CSS3来控制近100张图片。

07 Teehan+Lax

http://www.teehanlax.com/

.这个站点精心处理了每个细节美丽地展示了每个故事。内容有着非常好的排版和动画效果。但你也非常可能没主要到这些细节：当你浏览到网页中间部分，突然想回到顶部菜单条，这时往上滚动鼠标，顶部的导航栏就会出现了。

这个逻辑非常有道理的，想一想。当你鼠标往下滚动时。你是想继续往下阅读，所以不须要导航栏以免挡住一些阅读区域。当你鼠标往上滚动时，导航栏就自己主动出现由于你可能想到网页顶部找导航栏跳转到其他页面。

08 Coffee Surfing illy

http://coffeesurfing.illy.com/wps/wcm/connect/cs_en/home

这个网页或许没有第一个介绍的那个站点那样好的无缝效果。但页面切换效果非常有趣。当你滚动鼠标时，页面左右区域会向不同方向切换。

09 Satorisan

http://satorisan.com/

这个站点针对购物商店进行设计。基本的商品页面同意你在一个列表中浏览所以的产品，点击不论什么产品会以美丽的视差滚动效果跳转到产品详情页面。

10 Wink TTD

http://winkttd.es/

这个站点在响应和交互方面表现得非常棒。

当你用不同的设备比方非常大个的iMac或者非常小个的iPhone来訪问，页面和动画基本如一。

11 Solasie

http://www.solasie.com/en/

这个站点在交互设计方面做得非常棒。你能够非常愉快地在浏览富媒体内容（图片画廊、音乐和影视）。唯一的不足就是SEO做得不好，这个问题在Ajax输出内容的网页是非常普遍的，但他们通常是通过提供带关键词的链接来分享这些网页。

12 REI 1440 Project

http://www.rei1440project.com/

这个站点使用时间线非常适合地表现他们的观念：“一分分钟”组成了24小时。你能够使用方向键浏览那些时间点，点击进入，你会发现效果做得非常棒。

13 Sketchin

http://www.sketchin.ch/en/

隐藏在导航菜单的文本是这个站点的一个亮点。

14 Anonymous

http://weareanonymous.fr/

这个站点布局有非常好的设计，并且提供了不错的资源（隐藏在可爱的脸蛋后面）

15 Beatbox Academy

http://www.beatboxacademy.ca/

这个站点能够用按键和鼠标来敲击不同的鼓。

它没有其他服务（你不能保存或者导出鼓声），但挺好玩的。

点击右上方的导航栏，视差滚动效果也是很棒的。

16 Quartz

http://qz.com/

这个站点把重点放在了内容部分。

它不像新闻类站点让你去点击标题然后再阅读整篇文章，而是在一个页面中展示了全部内容。

当你滚动左側的标题栏目。内容会自己主动预读。点击之后。地址栏也会自己主动更新方面分享文章。手机流量能够有同样的体验。

17 Evans Halshaw - Bond Cars

http://www.evanshalshaw.com/bondcars/

假设你是视差滚动效果爱好者。那这个站点就一定要看下。

18 Zurb Manifesto

http://zurb.com/manifesto

还有一个视差滚动效果为主的站点。

19 Peugeot Hybrid4

http://graphicnovel-hybrid4.peugeot.com/start.html

假设你认为上面介绍的视差滚动效果很酷，那你肯定还没见过这个站点 — 美丽的插图、关键帧动画、令人激动的音乐还有超强悍的切换效果。訪问这个站点可一定要开着音响！

20 Chrysler: Test of Ownership

http://testofownership.com/

这是具有优秀页面切换效果的还有一个样例。当选择不同网页的时候，页面布局、内容过渡效果都非常好，更不要说 http://testofownership.com/proof 美丽的动画。向下滚动，数字、图表会自己主动添加。向上滚动就会做出相反的动作。简单。但非常酷炫。

（译者注：临时打不开~）

21 Tinke

http://www.zensorium.com/tinke/

这个站点会演示整个产品流程给你看，可惜不是响应式的。

22 Milwaukee Police News 

http://www.milwaukeepolicenews.com/

用Ajax和视差效果实现的酷炫的警察站点。

23 2am Media

http://2ammedia.co.uk/

尽管这个树枝结构的菜单看起来是Flash效果，但难以置信它是用Javascript实现的。

24 Minimal Monkey

http://minimalmonkey.com/

这是一个简单的站点，但布局、页面转换和导航都支持响应式。

25 Athenos 

http://www.athenos.com/

这是一个可爱的站点并有着一系列的细节设计和切换效果，它证明了庞大的现代站点在载入时确实比較慢，由于只一个Gif图片就有2.5mb这么大，美丽程度与文件大小成正比。

26 Meng To 

http://mengto.com/

这个站点用不俗的图片和突然的动画展示了美丽的作品。

27 RED 

http://ff0000.com/

当你浏览站点各个地方。你会发现这个站点有着相当丰富的设计细节和动画效果。

28 Carbon Studio

http://www.carbonstudio.co.uk/

假设你错过了老式Flash能够拖控图片的时代，那你要好好赞赏这个站点。

29 Oakley Airbrake MX

http://moto.oakley.com/

这是还有一个让人疯狂的滚动视差站点，具有视觉冲击力地展示了他们的产品。

30 Nick Jones

http://www.narrowdesign.com/

这个站点或许有点过时了。但它的交互设计依旧是很棒的。

 很多其它：