凤凰网:一条将发生在6月1日的新闻

2019-05-29 H5案例分享 H5案例分享
凤凰网:一条将发生在6月1日的新闻


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

识别图中二维码

一条将发生在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案例分享”团队原创文章,转载请注明出处!

标签

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

相关推荐:

忘不了餐厅&腾讯公益&中国人口福利基金会:忘不了课堂

天猫亲子节&阿里巴巴公益:99%妈妈都不知道的答案

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~