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

案例赏析链接：http://ifeng.healen.cn/index.html

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

案例：一条将发生在6月1日的新闻

品牌：凤凰网

技术实现： jQuery + hammerjs

亮点：

1. 创意定位

凤凰网“益童计划”推出的H5，标题“一条将发生在6月1日的新闻”很勾起好奇心，进入这支H5，却超级暖心。

2. 创意策划上

进入首屏后，看到五个年龄段（建国后出生、70年代出生、80年代出生、90年代出生、新世纪破壳），我还是首先点击了“新世纪破壳”这个选项，之后再分别进入不同年代进行体验，每个年代，都有符合这个年代的童年流行经典画面，让你回忆起童年的点点滴滴。

最后，是一张张处在真实困境中的孩子照片，让用户参与互动，用户只需点击助力，就有爱心企业为你的助力捐赠一元钱；助力的同时，可以添加图片（可选）和输入姓名，生成一张你的专属的凤凰新闻图片。

2. 设计上

案例前半部分（首页和不同年龄段动画）采用的手绘，后半部分采用凤凰网的写实页面，活泼新颖，有趣且不失真实。

3. 技术上

① 横纵屏都保持横屏的状态，使用CSS3的transform的rotate实现，通过transform-origin很好的调整了旋转中心点（因为默认旋转中心点在屏幕的左上角）。

② 手势操作，借助的移动端手势库hammerjs。

4. 体验上

超级有爱的H5，可能是因为公益属性，可能是看到自己童年的画面，可能是被一张张真实的照片感动，总之看后心里超暖。

【案例截屏】

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