智联招聘:她们的“秘密”

2017-04-24 H5案例分享 H5案例分享
智联招聘:她们的“秘密”


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

识别图中二维码

她们的“秘密”-查阅二维码

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


案例:她们的“秘密”

出品:智联招聘

亮点:

  1. 策划上,地理定位+漂流瓶+图片合成+助力。Loading完毕初次进入页面,会显示活动规则,点击按钮或等待片刻进入地图。在地图上每收集7个“口红”或“高跟鞋”或“爱心”,即可兑换一次礼包。打开礼包若中奖,则会弹出填写信息页,提交领取奖品;若未中奖,则会出现一个好看的背景和一句书评,并与用户头像合成一张图片,用户可以长按保存。地图页点击右下角按钮可捡起漂流瓶查看内容,也可以自己写一段书评放在漂流瓶扔出去。写的时候可以选择预设好的书评,也可以选择自己写。礼物不够还可以分享给好友让他们助力,分享出去后,好友点进案例,则在地图部分前,会先出现索要礼物是否送出的选项。用户还能查看都有哪些好友给自己助力了。

 

  1. 设计上,收集礼物部分,背景是腾讯地图,地图上有随机放置的手绘风格的小礼物,按钮元素大体配色选用了淡粉色和蓝紫色,并设置了动效和透明度,让其看上去在不会被忽略的同时,又没有那么突兀。背景音乐则是钢琴和小提琴纯音乐,曲风很高雅,也很好地衬托了“温柔力量”这个主题。

 

  1. 体验上,腾讯地图、礼物收集、抽奖、提交信息、图片合成、漂流瓶、助力…一个小小的H5却包含了这么多的交互元素,每个元素单拿出来都可以作为一支H5。虽然案例有很多功能点,但玩起来并没有复杂或冗余的感觉,反而会觉得玩法丰富、有趣。无论是地图还是图片合成还是漂流瓶,全程都有用户头像的元素,这样也大大提高了用户的参与感。



技术实现: jQuery + iScroll



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

标签

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

相关推荐:

智联招聘:职场生存研究中心

智联招聘:自由职场神曲

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~