滴滴公益:保护同类动物

2020-06-29 H5案例分享 H5案例分享
滴滴公益:保护同类动物


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

识别图中二维码

保护同类动物-查阅二维码

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


案例:保护同类动物

品牌:滴滴公益

技术实现: Hammer.JS

亮点:

1、策划上

滴滴公益在世界环境保护日(6月5日),推出的保护动物的H5;以“保护同类动物”为主题,这个同类动物,选择在城市或者城市周边生活,又与人类性格特点相匹配的动物。

 

2、策划上

① 进入H5后,看到大标题“每个人都有自己的同类动物,TA们是谁?”和提示向左滑动,滑动页面后,看到城市周边的森林,远景中还可以看到城市的楼宇;

② 慢慢不断滑动屏幕,在森林中看到不同的小动物,有斑羚、刺猬、野猪、灰鹤、鸳鸯、貉、豹猫,7种类型的动物;每个动物还添加了修饰词,例如:爱熬夜的豹猫、被眷宠的鸳鸯等;

③ 初始状态,可以点击的动物身上圆形的点,圆点在不断闪动,提醒用户点击,点击后,出现弹出层,会有动物名字和拟人的动物性格说明文案,弹出层上还有两个按钮,一个是“在找找看”,即为隐藏弹出层,另一个是“你好同类”,出现“输入你的名字”的弹出层,输入名字后,点击“去保护同类”按钮,生成海报;

④ 海报上有,你和你选择的同类动物都是什么类型的动物,产生共鸣;还有一个小细节,下方的文案默认有三条,用户可以点击左右按钮进行选择,每个动物的这三句文案是不同的,选择好后,会合成在海报中;最下方是捐赠滴滴里程,保护同类动物,点击后,需要输入自己的滴滴账号。

 

3、设计上

很精致的插画,动物设计的很可爱。

 

4、体验上

进入H5后会提示获取地理位置,但是授权后,并没有在案例中感受到和刚刚获取地理位置有关的内容。





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

标签

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

相关推荐:

腾信新闻X腾讯公益:中华十大野生名菜

HONOR + WWF:用长焦守望地球上的朋友

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~