凤凰网:一条将发生在6月1日的新闻
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要1分30秒
案例:一条将发生在6月1日的新闻
品牌:凤凰网
亮点:
1. 创意策划上
配合凤凰网公益“益童计划”推出的H5,标题“一条将发生在6月1日的新闻”很勾起好奇心,进入这支H5,确超级暖心。
进入首屏后,看到五个年龄段(建国后出生、70年代出生、80年代出生、90年代出生、新世纪破壳),我还是首先点击了“新世纪破壳”这个选项,而后又重新其他年龄段点击后的内容,不同的年龄段,进入后,都会有对应时代的童年记忆画面。
而后是一张张真实困境孩子的照片,并询问,是否乐意参加这次的公益活动,你只需助力,就有爱心企业为你的助力捐赠一元钱;助力的同时,可以添加图片(可选)和输入姓名,生成一张你的专属的凤凰暖新闻。
2. 设计上
案例前半部分(首页和不同年龄段动画)采用的手绘,后半部分采用凤凰网的写实页面,更正式。
3. 技术上
① 横纵屏都保持横屏的状态,使用CSS3的transform的rotate实现,通过transform-origin很好的调整了旋转中心点(因为默认旋转中心点在屏幕的左上角)。
② 手势操作,借助的移动端手势库hammerjs。
4. 体验上
超级有爱的H5,可能是因为公益属性,可能是看到自己童年的画面,可能是被一张张真实的照片感动,总之看后心里超暖。
技术实现: jquery + hammer.js
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号