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

时间 2020-08-18 标签酷毙交互式网站 html5+css3 html css

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

---------------------------------------------------------------------------------------------web

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

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

我很抱歉好久没更新这个网站了，但不要担忧，我还活着（在忙另一个网站）。今天我有个很帅的主题要分享—30个酷毙的网站。布局

HTML5，CSS3，还有Javascript让不少绚丽的设计效果得以展现。如今的网页设计是能够颇有交互性的，已经再也不被静态布局给限制住了。下面列出的这30个网站就是个很不错的证实，它经过诸如音频和视频让传统效果变得酷炫。开始欣赏吧！动画

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

01BienvilleCapitalManagement

http://www.bienvillecapital.com/搜索引擎

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

02ToolofNorthAmerica

http://toolofna.com/翻译

第一眼看到这个网站就以为太像一个Flash网站了，但它确实是只由HTML5，CSS3和Javascript来实现的，并且动画效果超级平滑。由于使用了Ajax（对SEO一点都不友好），因此内容部分不能被搜索引擎索引到。若是你的浏览器不支持Javascript，就会只出现一个黑色页面。尽管这种模式对SEO（译者注：搜索引擎排名技术）不友好，但它的交互效果太棒了，并且在手机浏览器的表现效果的是很漂亮的。

03Whiteboard

http://whiteboard.is/

这个网站有着极好的背景模糊效果。亲眼看下：当浏览器分辨率较低（或在手机设备），背景会有模糊效果，不然就是一组动画效果。

04Cyclemon

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

简单漂亮的滚动插图效果。

05MahedineYahia

http://www.mahedineyahia.fr/

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

06LifeofPi

http://journey.lifeofpimovie.com/

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

07Teehan+Lax

http://www.teehanlax.com/

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