MOBILE - 优秀案例赏析

技术实现 3.5分

实现原理为不同的大白从画面外落下，用户点击拍照按钮时，获取大白和画面中心点的偏移值，从而算取分数。

据说……3天，从构想到发布。

半天，2万多人参与、拍出100多万张照片、微信公众账号加粉2000多。

技术实现 4分

杜蕾斯“空气套”利用手机特性和用户产生互动，让用户在互动的同时了解套套的5大特性：

1. 让用户若拽套套边缘，通过Canvas技术模拟套套的柔软特性；

2. 通过手机陀螺仪，让用户持平手机，仿佛有一滴水在屏幕上，防止滑落，来告知用户新品杜蕾斯的润滑效果；

3. 让用户拖拽手机屏幕上的套套，展现套套的完整样貌，同时表达铁盒性和延展性;

4. 点按屏幕，模拟吹鼓套套，表示用户即使用嘴巴去吹套套，也不会闻到乳胶味。

结尾还放了个宣传视频…… ^_^

技术实现 5分

使用复杂的SVG算法技术动态修改矢量形状，从而达到色块拼合出不同动物的效果。

同时因为是矢量图，放大缩小都不会失真。

技术实现 3.5分

通过点、划屏幕来展示S级轿跑的与众不同，虽然没有特别复杂的交互技术，但每一个动画转场和切换衔接的恰到好处，毫不唐突！

过场的视频动画虽然精度不高，但想来在手机上播放，也情有可原。

技术实现 1分

恰逢清明节的专题页面，整个专题风格偏动漫效果，搭配背景音乐渲染恐怖阴森的效果。

用户通过点击斧头、锯子，匕首等不同的道具来惩罚不陪妹子看电影的男朋友，然后结尾显示为了不过清明节，让用户使用手机百度订票和女朋友一起看电影。

技术实现 5分

其实这是一个技术实现demo，是由Three.js驱动的WebGL游戏，你会进入一个充满障碍的空间之后它会让你要想办法跳出障碍，这款游戏demo有着非常好的视觉效果和配乐，并且速度和难度会随着游戏的进度而逐渐提高。

玩家通过使用手指上下滑动来分别通过障碍中上、中、下三个空隙。

技术实现 3分

酷炫的背景乐，精美的视频会，充满知识的文案，以及怀旧的视觉效果，这一切一切都是为了“向原创致敬”，让用户了解“沙漠靴”的历史由来。

技术上实现并没有过多花哨的技巧，常见的划屏、点击放大，Canvas逐帧动画等衔接的恰到好处，流畅不生硬。

技术实现 0.5分

小时候，父亲就是我们的超级英雄，他无所不知、无所不能；而等我们长大了，离家远去，很多时候却只能通过手机与他们联系。

情感浓郁的专题，文案搭配感人的背景音乐让人感触颇深。

技术实现是使用陀螺仪来检测手机的倾斜角度，从而显示不同的内容。

技术实现 1.5分

开场使用类似指纹解锁的方式开启专题，其实现原理和指纹毫无相关，仅仅是触摸三秒即可，但文案和视觉如此渲染，整个氛围就会有所提升。

简单的划屏过一个类似脑筋急转弯的小动画以后，提示用户抬高手机，此时是使用陀螺仪来检测手机倾斜。

下一个场景提示用户亲吻屏幕，目前手机屏幕还不能识别到用户唇形，实现原理是两个不同的触摸点即可，比如说两根手指去触摸屏幕。（能实现感觉也不想亲，屏幕有点脏，哈哈……）

技术实现 4.5分

强烈的漫画风专题，整个专题感觉就是一章互动漫画！

每一次切换会有不同的画面进入效果，同时剧情走心，让用户不断期待下一页剧情。

通过点击、拖拽、竖直手机环顾四周（陀螺仪）记忆触摸写字（Canvas实现）等让用户在强参与下看完整个漫画，并理解别克车系的产品理念和特性。

技术实现 4分

一个手机上的视差滚动效果。

用户不断滑动手机屏幕，画面不断视差滚动显示信息，原理是使用CSS3形变、旋转效果搭配JavaScript计算划屏数值来实现整个视差效果。

技术实现 4.5分

通过CSS3以及JavaScript实现了复杂的转场动画，一些地方通过PNG透明图片实现的遮罩效果很有意思。

这是一个双屏响应站，在PC上访问效果更佳。

技术实现 2分

杜蕾斯的双机互动专题，和双屏互动不同，双机互动是指两部手机一起来玩（看）的专题。

这个专题并没有严格要求必须两个手机一起来，实现是分别播放男女不同版本的视频来做到的。

技术实现 2分

完成小游戏，根据不同的得分和选择来显示不同的高端车型，从而达到有趣又诱导分享的目的。

第一关类似抓阄的小游戏是通过JavaScript以及CSS3动画实现；第二关拍照游戏和拍大白类似，但这里的人物出现是随机位置出现，难度系数更大！第三关选“车载设备”就没什么难度了。

最终，根据得分和选择来适配结果给用户。

技术实现 3.5分

用户通过选择身体不同部位组成一个完整的形象，点击不同部位时会通过CSS3实现动画效果，再利用JavaScript记录用户的选择，最终生成时利用Canvas来生成完整的用户形象。

根据用户不同的选择搭配，JavaScript会计算出一个属性参数给用户，同时出现符合这身搭配的标签给用户查看。

技术实现 3.5分

炫酷的背景音乐加上给力的文案，搭配炫酷的CSS3动画，体现专题想表达的自由派精神。

如果你仔细读文案，会发现每一句文案都是刚好押韵的。

雪铁龙LOGO作为翻页icon出现在页面下方，不断提示用户专题主题是雪铁龙，自由派 = 雪铁龙C3-XR

技术实现 4.5分

杜蕾斯的又一个双机互动专题，和上次不同，这次的双机互动专题互动性更加强，强制要求用户需要两部手机才可以玩。

用户选择性别后，会显示二维码给你的另一半扫描，扫描后显示小游戏来互动。

每次的小游戏交互并不复杂，更多的是展示Canvas动画效果，这里有一个小细节是双机其实是有数据互通的，两部手机在不同的请求服务器来同步动画显示，从而达到更好的体验。

技术实现 3分

现代都市人大多有拖延症，说好的事情总是一拖再拖，不到最后时刻都提不起精神来做。

“adidas打败接口”写好目标分享朋友圈，类似立军令状的效果导致了该专题的病毒式传播。

技术方面用户在划屏时是通过Canvas来记录用户划屏轨迹，从而模拟写字效果，最终上传用户文案，并分享。

技术实现 4.5分

情怀与技术的完美结合，走心的作品！

利用Canvas模拟纸张，按下按钮时不断擦写Canvas，辅助CSS3以及JavaScript来移动纸张以及打印机零部件从而完美模拟打印效果。