Google HTML5+Rock Music :《The Wilderness Downtown》

2023-11-08 17:10

本文主要是介绍Google HTML5+Rock Music :《The Wilderness Downtown》,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

2010年9月5日

The Wilderness Downtown
The Wilderness Downtown

如果你从没听说过互动电影,那就真的要点击这里 开 开眼界了。这个页面以灰白色调为主,页面上的动画效果皆由 HTML5 技术制作,官方推荐最好使用 Chrome 浏览器,经过我们的试用,IE8 与 Opera 均无法启动这个页面,而 Firefox 4.0 Beta 4 和 Safari 都能体验这个互动电影。

The Wilderness Downtown
谷歌在间接“鄙视”IE8 与 Opera 对 HTML5 的支持度

但这两款浏览器对这个页面的 HTML5 特效处理速度奇慢无比,偶尔还会出现崩溃现象,我们不排除这一个页面为谷歌 Chrome 浏览器特别优化过,因为这种以特效体验页面来暗中贬低对手的把戏已经屡见不鲜了。

登录这个页面后你首先需要输入你小时候的住址,为什么?因为电影情节将会从这里开始,并且融合谷歌地图和谷歌街景的技术到电影中,达到非常震撼的互动效果,其他诸如 Canvas,Video,Audio 等的 HTML5 标准特效就更加不用多介绍了。

The Wilderness Downtown
输入小时候的住址

经过好一会儿的载入等待之后,由著名作家兼导演 Chris Milk 亲自操刀的互动电影就开始了,开始的时候,一名模样十分鬼祟的白衣男子在狂奔,奔到有气无力的时候,电影会先暂停,让你用交互绘图工具绘画一张明信片,寄给小时候的你。

The Wilderness Downtown
一双无影脚

The Wilderness Downtown
谷歌街景视图中的是不是你儿时的家?

你可以用鼠标乱涂乱画,也可以直接输入你想说的话,不过这张明信片,无论你的画工有多精细,画出来的都只能是错综复杂的线条,配合著名独立摇滚乐团 Arcade Fire 刚刚推出的新专辑《The Suburbs 》中的歌曲 We Used to Wait 作为主题音乐,颇有剪不断理换乱的感觉。

The Wilderness Downtown
错综复杂的明信片

The Wilderness Downtown
写完明信片后将会是一段狂奔的视频

纸上谈兵完毕,最后送上这个HTML5 互动电影《The Wilderness Downtown》的视频。


The Wilderness Downtown

关于 Arcade Fire (拱廊之火)

Arcade Fire(拱廊之火)是一支独立摇滚乐队,来自于加拿大的蒙特利尔。乐队的主创成员是Win Butler和Régine Chassagne,他们是一对夫妻。乐队演奏的主要乐器有吉他、贝司和鼓,除此之外还有钢琴、小提琴、中提琴、大提琴、低音提琴、木琴、钟琴、键盘、圆 号、手风琴、竖琴、曼陀林和手摇风琴。乐队在巡演中会带上几乎所有的乐器,然后由多面手的乐队成员们在整场演出中交替演奏。

Arcade Fire
Arcade Fire(拱廊之火)

拱廊之火乐队赢得了诸多奖项,包括2008年流星音乐奖的最佳国际专辑奖和2008年朱诺音乐奖的年度另类专辑奖。乐队在2005年和2008年因专辑《Funeral 》(葬礼)和《Neon Bible 》(霓虹圣经)同获格莱美音乐奖的最佳另类音乐专辑奖提名。而他们于2010年发行的新专辑《The Suburbs 》(郊区),更是得到了评论界的称赞。

 

转自:http://www.iamued.com/qianduan/1701.html

这篇关于Google HTML5+Rock Music :《The Wilderness Downtown》的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/371281

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js

CSS @media print 使用详解

《CSS@mediaprint使用详解》:本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例,如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等,还提供了测试方法和关键注意事项,并分享了进阶技巧,详细内容请阅读本文,希望能对你有所帮助...

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分