30个酷毙的交互式网站(HTML5+CSS3)

最新推荐文章于 2025-03-20 14:29:14 发布

乡下程序员

最新推荐文章于 2025-03-20 14:29:14 发布

阅读量10w+

点赞数 35

分类专栏：网站开发文章标签： Html5 css3 交互设计响应式

网站开发专栏收录该内容

32 篇文章

订阅专栏

很久前就像找些文章来翻译，and这是第一篇，刚开始翻译着很有兴致，但中间就开始累了，感觉好多好多，因为不仅要翻译，还要看网站，还要排版，花了两天空闲时间还是硬着头皮翻译下来了，虽然翻译质量还是好渣，不少单词还得看词典~~

---------------------------------------------------------------------------------------------

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/

.这个网站精心处理了每个细节漂亮地展示了每一个故事。内容有着很好的排版和动画效果，但你也很可能没主要到这些细节：当你浏览到网页中间部分，突然想回到顶部菜单栏，这时往上滚动鼠标，顶部的导航栏就会出现了。这个逻辑很有道理的，想一想，当你鼠标往下滚动时，你是想继续往下阅读，所以不需要导航栏以免挡住一些阅读区域；当你鼠标往上滚动时，导航栏就自动出现因为你可能想到网页顶部找导航栏跳转到其它页面。