腾讯大粤网×二八创意工作室:定格此刻,抹去你对海洋的伤害

2019-08-02 H5案例分享 H5案例分享
腾讯大粤网×二八创意工作室:定格此刻,抹去你对海洋的伤害


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

识别图中二维码

定格此刻,抹去你对海洋的伤害-查阅二维码

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


案例:定格此刻,抹去你对海洋的伤害

品牌:腾讯大粤网×二八创意工作室

亮点:

  • 1、创意分析

环境保护是当今社会的重点话题,与人类生活息息相关,海洋占地球表面积的71%,海洋保护也是环境保护的主要部分之一。H5以人类日常生活中的一个小小塑料瓶为线索,从塑料污染、有毒物污染以及赤潮蔓延三个角度讲述人类日常生活细节可能对海洋造成的伤害,以“定格”为主题,结合生活实际,呼吁人类保护海洋环境,爱护赖以生存的地球。

  • 2、逻辑策划

以日常生活中一个被丢弃的塑料瓶为线索,展现了塑料瓶成为海洋垃圾的过程,选取海底的鱼、渔夫以及海鸥三个视角,分别从塑料污染、有毒物污染以及赤潮蔓延三个方向以视频形式描述人类生活对海洋造成的伤害,用户通过选择不同场景可倒放伤害造成的过程,通过擦拭的手段还原海洋本色,输入姓名后可生成定制海报转发朋友圈,从而达到呼吁大家增强环保意识,爱护海洋环境的目的。

3、设计上

整体画面以蓝灰黑为主,使用扁平纹理画风,加深表达海洋污染的灰暗。还原本色后以浅蓝、绿、粉红为主,展示海洋的明亮,通过灰暗与明亮的强烈对比,使用反差的手段突出美丽干净的冲击感。

4、体验上

H5以JQuery为主,视频与Canvas相结合,整体情节饱满流畅,视频形象展示内容细节,采用Canvas技术实现橡皮擦擦拭效果并生成定制海报,海洋污染的灰暗与还原本色后的明亮形成鲜明对比,整体流畅性、观赏性以及互动性强,用户代入感强烈。



技术实现: html5+css3



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

标签

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

相关推荐:

新东方:他们的单选题

WWF:你发现TA了吗?

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~