网易新闻|哒哒:漫威电影十周年

2018-04-27 H5案例分享 H5案例分享
网易新闻|哒哒:漫威电影十周年


案例演示,请长按/扫描以下二维码 ->

识别图中二维码

漫威电影十周年-查阅二维码

完整欣赏此案例大约需要2分钟


案例:漫威电影十周年

出品:网易新闻|哒哒

亮点:

  1. 策划上,这是网易新闻|哒哒出品的纪念漫威电影十周年的宣传H5。Loading完毕,进入一段动画。接着提示用户:摁住按钮,重返漫威十年。依次展现了旗下的18个电影的上映时间,主要人物以及经典台词,让人印象深刻。按钮消失,画面展现《复仇者联盟3:无限挑战》电影的宣传片段以及上映时间,起到宣传效果,播放结束后显示王三三和小伙伴在影院的画面,下方有两个按钮,引导用户再看一次,或者分享。
  2. 设计上,整个画面以宇宙星空为背景,人物出场有一个由远及近的效果,背景音乐大气磅礴,体验过程很震撼;用户长按屏幕按钮,加载画面,体验时用户可控制画面停止,以便详细查看电影海报内容,增强用户的参与感。
  3. 交互上,长按屏幕,加载画面。
  4. 体验上,这个H5总结了漫威电影过去10年来的18部系列电影,雷神、钢铁侠、美国队长、绿巨人......大气磅礴的背景音乐,代入感很强,引导小五不断进入各种回忆,哈哈。

 

内容显示

2008年5月2号《钢铁侠》上映,经典台词“我就是钢铁侠”;

2008年6月13日《无敌浩克》上映,经典台词“不变身时,他就像霍金”;

2010年5月7日《钢铁侠2》上映,经典台词“有时候,在我们学会走之前,要先学会跑”;

2011年5月6日《雷神》上映,经典台词“一位明君从不挑起战争,但时刻做好准备”;

2011年7月22日《美国队长:复仇者先锋》上映,经典台词“永远别忘了你是谁,不要当一个好兵,要当一个好人”;

......



技术实现: jQuery.js+ jsmpeg.js+canvas



以上为“H5案例分享”团队原创文章,转载请注明出处!

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

网易新闻|哒哒&&缤智:转出你的爱情密语

网易新闻|哒哒:睡姿大比拼

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~