河西做网站：30创意HTML 5网站的网页设计灵感

HTML 5介绍了一些惊人的特征和技术，帮助我们创造了快速，互动和令人震惊的美丽网站前所未有。

它的先进多媒体使我们能够建立有创意的网站，平稳的过渡，精美的图像滑块和动画，以前是用Flash，JavaScript或一些认真的硬设计。

HTML 5带来了许多新的功能，河西做网站任何网页设计师都应该对此感到兴奋。首先，HTML 5带来了新的媒体特性和元素，例如video, audio，惊艳canvas，这使得在不使用专有软件(如Flash、Javascript)的情况下将媒体组件集成到网站中变得更加容易。

因此，如果您需要灵感或您的下一个HTML 5网站的某些方向，我们已经编制了30个最有创意和创新的HTML 5网站的总结性投入。我们也有一些免费HTML 5网页模板以防万一这就是你要找的。

1.小胡子游戏

小胡子游戏允许用户玩一个游戏，他们必须通过YouTube或Hulu等视频平台向人们添加胡子。网站使用<视频>元素嵌入电影。

2. 布兰登发电机

布兰登生成器是一个互动式故事，旨在推广IE9。该网站使用的技术混合是HTML 5，CSS 3和jQuery是一个与SVG和画布一起创建美妙的动画和过渡，提供丰富的视觉和互动体验。

3. 罗杰·杜布伊斯

瑞士钟表制造商RogerDubuis使用HTML 5的视频和音频功能，通过对每个时间段的交互介绍，提供了一种难忘的体验。该网站还使用历史和地理定位API为访问者提供他们最近的商店的位置。

4.比约克

冰岛流行音乐偶像比约克的HTML 5网站使用画布元素的说明能力，帮助创建惊人的3D星系。当你进入这个星系的时候，你可以用鼠标诅咒来旋转星系，并录下Bj rk播放的音乐。离开这个世界！

5. Metropol波段

这个漂亮的HTML 5网站使用画布，拖放API和视频的组合，把它变成一个互动和有趣的视频点唱机。

6. 詹姆斯·安德森

詹姆斯安德森的网站使用内嵌SVG来创建吸引人的图形可视化他的统计数字。该网站专注于板球运动员的职业生涯的数字，并通过使用动画与数字，它使它看起来像一个巨大的交互式信息图表。

7.露易丝牛仔裤

本网站使用HTML 5视频。此外，<visual>标记元素是用三个替代版本.ogv、.webm和.mp4实现的，因此允许在大多数浏览器中进行最佳回放。

8. 弗里佐

如果你想学弹钢琴，这是你的机会。使用画布元素，站点结合了音频和与鼠标进行键交互的能力。试着成为莫扎特。

9. 网络摄像头玩具

这个网站就是HTML 5取代最初在Flash中构建的内容的例子之一。W3C定义的HTML 5新的getUserMediaAPI允许站点所有者从Flash切换，让浏览器不需要使用插件就可以访问摄像机。

10.野兽

这里是另一个创造性的例子，它展示了HTML 5的可能性。网站的自我卷轴作为一首诗被读出，同时插图和动画显示了一些巧妙的效果。

11. 街机之火：荒野的市中心

由ChrisMilk编写和导演的这个GoogleChrome实验是HTML 5多功能性的一个惊人的例子。访问者可以输入他们的地址和互动音乐视频将播放使用谷歌地球在后台。试试看！

12.灵魂死神

这部时尚的数字漫画书是通过过渡和动画的结合使用HTML 5来实现的。漫画书迷们玩得很开心。

13.大学系列

这部互动百科全书是好莱坞最大的电视连续剧创作者之一，它将HTML 5的视觉化应用非常广泛。绝对值得一看，尤其是如果你是电视剧迷的话。

14. 表现性Web

这个表现式的Web是由Adobe创建的，它展示了一个出色的HTML 5用户指南，并展示了HTML 5和CSS 3的功能和功能。

15.CNN生态圈

CNN生态圈是里约+20地球峰会周围推文的实时全球代表。目标是让访问者使用Twitter和#RIO 20标签来植入“想法”。一旦足够多的推文被“植入”，HTML 5的可视化就会启动，以创造一个美丽的球体。每个花蕾代表一个推特。

16. 三个黑梦

另一个互动视频克里斯米尔克和他的朋友在谷歌，这是一个巧妙的方式来推广专辑“罗马”由危险老鼠和丹尼尔卢皮。该网站使用WebGL添加与视频中对音乐和用户输入作出反应的对象的交互性。

17. 本壳牌

另一个独特和迷人的方式来推广一张专辑，这个网站使用一个简单的益智游戏创建使用画布元素，这需要解决在分配的时间限制。如果您完成了它，您将获得免费下载。

18.Intacto

Intacto使用HTML 5、jQuery和视差来通过数字宇宙之旅展示十年的历史。有趣的是，当你进入网站时，你可以使用鼠标或键盘箭头自动或手动浏览。

19. 谷歌的“武器环球”

谷歌的武器贸易可视化将武器进出口呈现为国家间的界线，并详细介绍了1992年至2010年期间武器支出和百分比变化的数据。项目负责人迈克尔·张(MichaelChang)表示，这是一种“非常经典的‘让这些数据看起来很性感’的运动”。

20. 欧洲牧马人

在过去的几年里，Wrangler一直在使用最新的技术来创造一个在线存在，以支持其品牌价值。它目前的网站展示了HTML 5是如何以一种吸引人的方式在网上展示产品的。他们开发了在3D空间内动画电影序列的技术，并在每个场景中添加了音乐配乐，以及与站点交互同步的声音效果。这是最终的用户体验，所以不要错过。

21.幸福包括

这篇创意作品让你经历了一个“完美假日”的互动旅程，从头到尾。您可以让它自动播放，也可以通过滚动页面手动控制它。试试看！

22. 频率2156

Frequency2156是一个以社区为基础的网络广播电台，它是继2156年世界末日之后的一个故事之后，用户可以发送内容的地方。它使用新的HTML 5技术，包括画布，视频和音频，WebGL以及CSS 3动画和过渡。

23. 创造9

Creative9的空间主题网站使用HTML 5和CSS 3动画的组合，使网站看起来非常逼真。

24. 野生动物

这个互动式的一页网站展示了一批数字先驱，他们绘制了未知的地图，并为那些敢于冒险进入前所未有和未经探索的领域的人绘制了数字未来的地图。

25. 耐克Jumpman

本网站使用“滚动故事”来提供鞋及其特征的交互式视觉表现。上下滑动可以让用户浏览产品故事，同时也提供几个站点来访问更多的信息。

26.Saucony Kinvara 3

SauconyKinvara 3网站提供了一个奇妙的互动体验。它之所以如此伟大，是因为它讲述了鞋子合而为一的故事。

27. vlog

这是马可罗塞拉的旋转HTML 5收集YouTube和Vimeo的最爱。这是一个HTML 5旋转站点，您可以通过切换两个视频源来发现各种视频。

28.压裂危险

这是一个一页的视差滚动网站，解释了哪些资源和材料进入有争议的水力压裂过程。这个过程在一个奇妙而又长的页面中得到了解释，它使用了一些很好的插图和图形，并且很好地利用了视差滚动和CSS而不是Flash。绝对值得一看。

29. 屏风

Screentoys是一个创造性的JavaScript/HTML 5实验，它使用CreatJS、Canvas和数据属性为用户提供有趣的交互体验。你可以选择著名的面孔，把它们变成奇怪的生物，然后把它们保存起来或者与其他人分享。

30.艺术天才

ArtIngenous是一个单一页面HTML 5站点，您可以在其中滚动浏览页面。它既干净又有效，所以去看看吧。

四舍五入

HTML 5的可能性是无限的。所以，让你的想象力奔放，发挥创造力！

还有其他有创意的HTML 5网站吗？请在下面的评论中分享。