30个酷毙的交互式⽹站（HTML5+CSS3）
很久前就像些⽂章来翻译，and这是第⼀篇，刚开始翻译着很有兴致，但中间就开始累了，感觉好多好多，因为不仅要翻译，还要看⽹站，还要排版，花了两天空闲时间还是硬着头⽪翻译下来了，虽然翻译质量还是好渣，不少单词还得看词典~~
---------------------------------------------------------------------------------------------
30个酷毙的交互式⽹站，原⽂地址：
我很抱歉很久没更新这个⽹站了，但不要担⼼，我还活着（在忙另外⼀个⽹站）。今天我有个很帅的主题要分享 — 30个酷毙的⽹站。
HTML5，CSS3，还有Javascript 让很多绚丽的设计效果得以展⽰。现在的⽹页设计是可以很有交互性的，已经不再被静态布局给限制住了。下⾯列出的这30个⽹站就是个很不错的证明，它通过诸如⾳频和视频让传统效果变得酷炫。开始欣赏吧！
（译者注：最好备⽤多种浏览器来访问）
01 Bienville Capital Management
这个⽹站使⽤了页⾯⽆缝过渡效果。点击那些⽹页你就会发现跳转到别的⽹页基本是没有停顿的，因为⽹页通过褪⾊和滑⾏动画使得切换效果很流畅。
02 Tool of North America
第⼀眼看到这个⽹站就觉得太像⼀个Flash⽹站了，但它确实是只由HTML5，CSS3和Javascript来实现的，⽽且动画效果超级平滑。因为使⽤了Ajax（对SEO⼀点都不友好），所以内容部分不能被搜索引擎索引到。如果你的浏览器不⽀持Javascript，就会只出现⼀个⿊⾊页⾯。尽管这种模式对SEO（译者注：搜索引擎排名技术）不友好，但它的交互效果太棒了，⽽且在⼿机浏览器的表现效果的是很漂亮的。
03 Whiteboard
这个⽹站有着极好的背景模糊效果。亲眼看下：当浏览器分辨率较低（或在⼿机设备），背景会有模糊效果，否则就是⼀组动画效果。04 Cyclemon
简单漂亮的滚动插图效果。
05 Mahedine Yahia
主要的背景动画由191张图⽚组成，当你浏览器往下滚动时就能看到独帧动画效果了。
06 Life of Pi
在这个⽹站浏览有更⾼⽔平的滚动独帧动画效果，如果你喜欢电影，那你会很喜欢拖动这个⽹站的滚动栏的。它使⽤独帧动画展⽰了变幻的背景材质，实现这个惊⼈的效果值需要⽤Javascript和CSS3来控制近100张图⽚。
07 Teehan+Lax
.这个⽹站精⼼处理了每个细节漂亮地展⽰了每⼀个故事。内容有着很好的排版和动画效果，但你也很可能没主要到这些细节：当你浏览到⽹页中间部分，突然想回到顶部菜单栏，这时往上滚动⿏标，顶部的导航栏就会出现了。这个逻辑很有道理的，想⼀想，当你⿏标往下滚动时，你是想继续往下阅读，所以不需要导航栏以免挡住⼀些阅读区域；当你⿏标往上滚动时，导航栏就⾃动出现因为你可能想到⽹页顶部导航栏跳转到其它页⾯。
08 Coffee Surfing illy
这个⽹页也许没有第⼀个介绍的那个⽹站那样好的⽆缝效果，但页⾯切换效果很有趣。当你滚动⿏标时，页⾯左右区域会向不同⽅向切换。
09 Satorisan
这个⽹站针对购物商店进⾏设计，主要的商品页⾯允许你在⼀个列表中浏览所以的产品，点击任何产品会以漂亮的视差滚动效果跳转到产品详情页⾯。
10 Wink TTD
html网页设计css这个⽹站在响应和交互⽅⾯表现得很棒。当你⽤不同的设备⽐如很⼤个的iMac或者很⼩个的iPhone来访问，页⾯和动画基本如⼀。
11 Solasie
这个⽹站在交互设计⽅⾯做得⾮常棒。你可以很愉快地在浏览富媒体内容（图⽚画廊、⾳乐和影视）。唯⼀的不⾜就是SEO做得不好，这个问题在Ajax输出内容的⽹页是很普遍的，但他们⼀般是通过提供带关键词的链接来分享这些⽹页。
12 REI 1440 Project
这个⽹站使⽤时间线很适合地表现他们的观念：“⼀分分钟”组成了24⼩时。你可以使⽤⽅向键浏览那些时间点，点击进⼊，你会发现效果做得⾮常棒。
13 Sketchin
隐藏在导航菜单的⽂本是这个⽹站的⼀个亮点。
14 Anonymous
这个⽹站布局有很好的设计，⽽且提供了不错的资源（隐藏在可爱的脸蛋后⾯）
15 Beatbox Academy
这个⽹站可以⽤按键和⿏标来敲击不同的⿎。它没有其它服务（你不能保存或者导出⿎声），但挺好玩的。点击右上⽅的导航栏，视差滚动效果也是⾮常棒的。
16 Quartz
这个⽹站把重点放在了内容部分。它不像新闻类⽹站让你去点击标题然后再阅读整篇⽂章，⽽是在⼀个页⾯中展⽰了所有内容。当你滚动左侧的标题栏⽬，内容会⾃动预读，点击之后，地址栏也会⾃动更新⽅⾯分享⽂章。⼿机流量可以有相同的体验。
17 Evans Halshaw - Bond Cars
如果你是视差滚动效果爱好者，那这个⽹站就⼀定要看下。
18 Zurb Manifesto
另⼀个视差滚动效果为主的⽹站。
19 Peugeot Hybrid4
如果你觉得上⾯介绍的视差滚动效果⾮常酷，那你肯定还没见过这个⽹站 — 漂亮的插图、关键帧动画、令⼈激动的⾳乐还有超强悍的切换效果。访问这个⽹站可⼀定要开着⾳响！
20 Chrysler: Test of Ownership
（译者注：暂时打不开~）
21 Tinke
这个⽹站会演⽰整个产品流程给你看，可惜不是响应式的。
22 Milwaukee Police News
⽤Ajax和视差效果实现的酷炫的警察⽹站。
23 2am Media
虽然这个树枝结构的菜单看起来是Flash效果，但难以置信它是⽤Javascript实现的。
24 Minimal Monkey
这是⼀个简单的⽹站，但布局、页⾯转换和导航都⽀持响应式。
25 Athenos
这是⼀个可爱的⽹站并有着⼀系列的细节设计和切换效果，它证明了庞⼤的现代⽹站在加载时确实⽐较慢，因为仅仅⼀个Gif图⽚就有2.5mb这么⼤，漂亮程度与⽂件⼤⼩成正⽐。
26 Meng To
这个⽹站⽤不俗的图⽚和突然的动画展⽰了漂亮的作品。
27 RED
当你浏览⽹站各个地⽅，你会发现这个⽹站有着相当丰富的设计细节和动画效果。
28 Carbon Studio
如果你错过了⽼式Flash可以拖控图⽚的时代，那你要好好欣赏这个⽹站。
29 Oakley Airbrake MX
这是另⼀个让⼈疯狂的滚动视差⽹站，具有视觉冲击⼒地展⽰了他们的产品。
30 Nick Jones
这个⽹站也许有点过时了，但它的交互设计依然是⾮常棒的。
更多：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。