天猫超市：过年别硬撑着了

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

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

识别图中二维码

过年别硬撑着了-查阅二维码

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

案例：过年别硬撑着了

出品：天猫超市

亮点：

策划上，视频类，这是一款宣传天猫超市年货节的H5。①Loading很有特点，是女主回家的过程，分别乘坐了飞机、火车、汽车、摩托车和三轮车这五类交通工具。其中每个页面都配有文字，迎接催婚的爸妈、碎嘴的亲戚等等。暗示了此H5的话题。②Loading完毕，进入一段视频，内容是女主遇到家中一众亲戚的提问，“有对象没？”、“买房了吗？”、“工作多少了？”…接下来是女主面对相亲、熊孩子、闺蜜炫耀等各种场景充满丧气；选择长按屏幕，进入另一种性格，面对各种场景各种diss、各种怼。两副面孔，都是以rap的方式表现。③视频rap的内容自然引出主题，“天猫超市买年货，带来一盒子美好”，进入最后一页，页面内容显示用户的春节焦躁指数（根据按住屏幕的时间统计），长按可保存图片，页面下方两个按钮“买年货”、“卖年货”。
设计上，采用了动画风格，展现了很多生活中的场景，画面很细腻；声音上使用了最近大火的rap，很有动感。
交互上，按住屏幕切换到不同的视频播放画面，很有意思。
体验上，从Loading开始，小五就被吸引了，各种交通工具以及配文，稍稍剧透又不说破。视频中，按住屏幕，页面切换不同的内容，这个与【紫龙游戏：新御剑情缘】（https://yjqy.treedom.cn/?_wv=1）类似。但是小五分析过视频后，发现这是一段视频，视频左右两边分别播放不同的内容，当播放时，默认为左边的画面，当按住屏幕，修改video标签的定位，从而达到此H5所呈现的效果。

技术实现： jQuery +h5scale.js

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

天猫超市：过年别硬撑着了

标签

相关推荐：

天猫：天猫超市请客节

脉动：刚刚，我在群里diss了所有“关心”我的亲戚...