滴滴出行：总有份爱在前方等待

2017-12-15 H5案例分享 H5案例分享

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

识别图中二维码

总有份爱在前方等待-查阅二维码

完整欣赏此案例大约需要40秒

案例：总有份爱在前方等待

出品：滴滴出行

亮点：

策划上，长图类，① 一个爱心随着加载的进度不断变换，loading完毕进入到长图页面，以一句走心的文案开篇：总有份爱，在前方等你。② 而后以场景化设计分别展现了一场爱恋、一道难题、一份心意、一种思念，四幅动态画面；③ 看了这些你是不是想快点回家呢？等等，先别急着赶回家，为了爱你的人，请系好安全带再出发。还可分享出去，来叮嘱你牵挂的TA哦。
设计上，手绘插画风格，采用蓝色和水红作为主色调，画面元素背景等仿佛是不同颜色的布，看起来好像是牛仔裤上的画面，很有质感，每幅场景里不断奔驰横穿的小汽车与滴滴出行暗暗呼应。
技术上，长图滑动效果用的是iScroll（移动端滚动插件），长图里的一幅幅动态场景是采用gif动图来实现的。

技术实现： Zepto + iScroll

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

标签