新华社:2021,送你一张船票

2021-02-19 H5案例分享 H5案例分享
新华社:2021,送你一张船票


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

识别图中二维码

2021,送你一张船票-查阅二维码

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


案例:2021,送你一张船票

品牌:新华社

技术实现: HTML5

亮点:

1.创意定位

新华社推出的建党100周年线上创意H5作品。以“2021,送你一张船票”为主题,以横向长图的形式让用户徜徉在历史长河中,从而让用户更了解党的历史和珍惜今天的美好生活。

 

2.策划逻辑

横屏作品。大致逻辑:① 微信授权;→ ② 剧情铺陈;→ ③ 100年建党大事件浏览;→ ④ 生成船票。

 

① 微信授权:获得用户头像和昵称,最后生成海报环节使用。

 

② 剧情铺陈:Loading即放出主题“一张船票带你穿越百年”,然后,黑白灰色调几张图讲述中国从鸦片战争后,山河破碎,人民生活在水深火热中,此时,诞生了中国共产党。然后,弹出第一道交互题目:中国共产党诞生于哪年?(1921年),再输入用户的出生年份,点击“出发”,即进入下一个环节。

 

③ 100年建党大事件:点击“前进”按钮,跟随这条诞生中国共产党的船,一路徜徉于历史长河。大事件列表:

 

  • (1/32)开天辟地大事变:1921年,中国共产党成立。(交互问题一)

(2/32)第一枪:1927年,南昌起义打响武装反抗国民党反动派的第一枪。

(3/32)星星之火,可以燎原:1927年,首个农村革命根据地在井冈山建立。

(4/32)伟大远征:1934年10月,中央红军开始两万五千里长征。

(5/32)浴血奋战:1937年,全民族抗战爆发。

 

(6/32)将革命进行到底:1949年4月,人民解放军占领南京“总统府”。

(7/32)没有共产党,就没有新中国:1949年10月,中华人民共和国成立。(交互问题二)

(8/32)人民翻身做主人:1950年,新解放区土地改革开始;1954年,新中国第一部宪法颁布。

(9/32)“我们的身后就是祖国”:1950年,中国人民志愿军抗美援朝出国作战。

(10/32)百废待兴:1955年,第一个五年计划期间,发现克拉玛依油田。

 

(11/32)艰苦奋斗:1956年,新中国第一辆汽车下线,第一架喷气式歼击机首飞成功。

(12/32)红旗插上珠穆朗玛峰:1960年5月,中国登山队员成功登顶珠穆朗玛峰。

(13/32)震惊世界:1964年,中国第一颗原子弹爆炸成功。(交互动作,点击原子弹爆炸)

(14/32)奋起直追:1970年,“东方红一号”升空;1974年,第一艘核潜艇入列。

(15/32)改革开放:1978年,党的十一届三中全会召开,改革开放拉开大幕。(交互问题三)

 

(16/32)香港回家:1997年,中国对香港恢复行使主权。

(17/32)澳门回家:1999年,中国对澳门恢复行使主权。

(18/32)拥抱世界:2001年,中国正式加入世贸组织。

(19/32)星辰大海:2003年,中国人首次进入太空。(交互动作,上滑火箭发射)

(20/32)打通“天路”:2006年,青藏铁路全线通车。

 

(21/32)世界舞台:2008年,北京举办第29届奥运会。

(22/32)文明盛宴:2010年,上海世博会开幕。

(23/32)中国梦:实现中华民族伟大复兴,是中华民族近代以来最伟大的梦想。

(24/32)八项规定聚民心:2012年,中央政治局出台改进工作作风、密切联系群众八项规定。

(25/32)“一带一路”:2013年,共建“一带一路”倡议提倡。

(26/32)千年大计:2017年,中国设立雄安新区。

(27/32)大国重器:党的十八大以来,港珠澳大桥、“中国天眼”等创新成就涌现。

(28/32)服务全球:2020年,北斗系统完成组网,服务全球。

(29/32)人民至上,生命至上:2020年,抗击新冠肺炎疫情斗争取得重大战略成果。

(30/32)全面小康:2020年,中国832个贫困县全部脱贫摘帽。

(31/32)时代史诗: 从2020年到2035年,基本实现社会主义现代化。

(32/32)伟大复兴:从2035年到本世纪中叶,建成富强民主文明和谐美丽的社会主义现代化强国。

 

横向自动播放,点击“暂停/回看”,出现大事件导航列表,已经浏览的事件,可以回看,未看过的事件无法导航点击。播放完毕,直接进入最后的海报(船票)生成页。

 

④ 生成船票:船票包含用户的昵称和头像,用户可以选择大事件,更换相应背景。点击确定,生成海报。点击分享,弹出引导分享蒙层。

 

3.设计交互

以仿真漫画形式,把100年大事件一气呵成,画面精美,过渡自然。多处交互均设置了引导提醒,让用户在徜徉历史长河大事件时,仍需思考和参与。最后生成的船票,既与用户相关,又精美好看。

 

4.用户体验

这样学习党史,生动形象,沉浸其中,竟然一件件,随着小船直接看到最后。这个H5内容太丰满啦,值得收藏。

 





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

标签

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

相关推荐:

人民日报新媒体:新春贺卡

国务院客户端 & 网易新闻:360°总理记者会

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~