天猫年货节：让心意先到家

2018-01-25 H5案例分享 H5案例分享

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

识别图中二维码

让心意先到家-查阅二维码

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

案例：让心意先到家

出品：天猫年货节

亮点：

策划上，视频类。Loading完毕，首页文字显示“又是一年，成长又多了些，不论单身还是有人陪伴，我们都学会了爱与分享”，滑动“打开声音，体验效果更佳”提示框，进入视频的播放。视频时长为1分17秒，内容：随着轨道球的滑动，不断显示天猫搜索“爸妈”相关产品的次数、北上广游子发送给父母的包裹数量、购买“广场舞音箱”、“遮白发染发膏”等产品的80后人数、“父母体检”的搜索次数等等。最终轨道球到达终点，一座名为“年货节”的小屋，品牌宣传到位。
设计上，视频使用了3D动画特效，模拟轨道球的运动，轨道设计的很有特点，沿途设计了很多的场景，例如，火车轨道、天猫配送包裹、广场舞画面等等，画面感十足。配音选的合适，轻音乐，加上汽车、火车、烟花等声音特效。画面与声音，整体给人感觉很细腻，很温馨。
交互上，触动页面便可播放视频。
体验上，小编很喜欢这个H5，整体有种很温馨的感觉。随着轨道球的运动，轨道沿途的设置了很多的场景，再现了很多生活中常见的画面，同时又显示各种与父母相关的产品搜索量等数据，为表现“爱”提供了有力的依据，更具真实感。喜欢这种平淡的音乐，代入感很强。

技术实现： jQuery.js+ iphone-inline-video.browser.js

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

标签