南方财经全媒体集团:科创走廊挺起产业“脊梁”

2023-02-20 H5案例分享 H5案例分享
南方财经全媒体集团:科创走廊挺起产业“脊梁”


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

识别图中二维码

科创走廊挺起产业“脊梁”-查阅二维码

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


案例:科创走廊挺起产业“脊梁”

品牌:南方财经全媒体集团

技术实现: HTML5、Canvas、Annie2x插件、AnnieJs引擎

制作:钟离伯涛

亮点:

1.创意定位

南方财经全媒体集团推出的「科创走廊挺起产业“脊梁”」为主题的创意H5作品。通过H5的方式,让大家通过交互式体验浏览广深港、广珠澳两条科技创新走廊,领略湾区创新“脊梁”如何助力广东,在新的高度挺起现代化建设的产业“脊梁”。

 

2.策划逻辑

大致逻辑:Loading → 开场动画 → 主题页 → 引导文案 →  广深港、广珠澳立体通道。

 

Loading部分,采用视频方式,需要用户点击后开始播放开场动画,相当震撼。

 

主题页部分,包含了主副标题:探索中国式现代化的广东路径,科创走廊,挺起产业「脊梁」,出品单位,点击「出品按钮」弹出出品单位介绍。根据引导,向上滑动,进入文案引导部分。

 

文案引导:引导大家了解湾区创新“脊梁”,去选择点击“广深港”或“广珠澳”科技创新走廊。

 

走廊部分:两条走廊,都采用了纵向迎面展示元素的效果,随着用户向上滑动,呈现广深港特色景点和相应取得的成就。每个通道都有交互进展地图。浏览完后,可以换另一个通道,也可以返回首页。

 

 

3.视觉交互

采用了科技蓝作为主背景,平面与立体结合,让实景与设计融合,配合纵向滑动交互,静态文字和图画扑面而来,视觉冲击力很强。

 

4.技术上

通过Annie2x+AnnieJs引擎完成H5动效制作及开发。用2D模拟出3D空间的穿越。

 

5.体验上

整体效果很流畅,尤其是两条科技创新走廊,利用纵向视觉冲击效果,让人印象深刻。

 





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

标签

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

相关推荐:

网易新闻:一分钟漫游港珠澳大桥

ENGINE:Meet Engine. The perfect taste explosion.

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~