网易新闻|哒哒:漫威电影十周年
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要2分钟
案例:漫威电影十周年
出品:网易新闻|哒哒
亮点:
- 策划上,这是网易新闻|哒哒出品的纪念漫威电影十周年的宣传H5。Loading完毕,进入一段动画。接着提示用户:摁住按钮,重返漫威十年。依次展现了旗下的18个电影的上映时间,主要人物以及经典台词,让人印象深刻。按钮消失,画面展现《复仇者联盟3:无限挑战》电影的宣传片段以及上映时间,起到宣传效果,播放结束后显示王三三和小伙伴在影院的画面,下方有两个按钮,引导用户再看一次,或者分享。
- 设计上,整个画面以宇宙星空为背景,人物出场有一个由远及近的效果,背景音乐大气磅礴,体验过程很震撼;用户长按屏幕按钮,加载画面,体验时用户可控制画面停止,以便详细查看电影海报内容,增强用户的参与感。
- 交互上,长按屏幕,加载画面。
- 体验上,这个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,搜索查阅~
微信扫一扫
关注该公众号