滴滴公益:保护同类动物
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要1分钟
案例:保护同类动物
品牌:滴滴公益
技术实现: Hammer.JS
亮点:
1、策划上
滴滴公益在世界环境保护日(6月5日),推出的保护动物的H5;以“保护同类动物”为主题,这个同类动物,选择在城市或者城市周边生活,又与人类性格特点相匹配的动物。
2、策划上
① 进入H5后,看到大标题“每个人都有自己的同类动物,TA们是谁?”和提示向左滑动,滑动页面后,看到城市周边的森林,远景中还可以看到城市的楼宇;
② 慢慢不断滑动屏幕,在森林中看到不同的小动物,有斑羚、刺猬、野猪、灰鹤、鸳鸯、貉、豹猫,7种类型的动物;每个动物还添加了修饰词,例如:爱熬夜的豹猫、被眷宠的鸳鸯等;
③ 初始状态,可以点击的动物身上圆形的点,圆点在不断闪动,提醒用户点击,点击后,出现弹出层,会有动物名字和拟人的动物性格说明文案,弹出层上还有两个按钮,一个是“在找找看”,即为隐藏弹出层,另一个是“你好同类”,出现“输入你的名字”的弹出层,输入名字后,点击“去保护同类”按钮,生成海报;
④ 海报上有,你和你选择的同类动物都是什么类型的动物,产生共鸣;还有一个小细节,下方的文案默认有三条,用户可以点击左右按钮进行选择,每个动物的这三句文案是不同的,选择好后,会合成在海报中;最下方是捐赠滴滴里程,保护同类动物,点击后,需要输入自己的滴滴账号。
3、设计上
很精致的插画,动物设计的很可爱。
4、体验上
进入H5后会提示获取地理位置,但是授权后,并没有在案例中感受到和刚刚获取地理位置有关的内容。
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号