肯德基：献给我们共同的青春记忆

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

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

识别图中二维码

献给我们共同的青春记忆 -查阅二维码

完整欣赏此案例大约需要2分10秒

案例：献给我们共同的青春记忆

出品：肯德基

亮点：

策划上，长图类+视频类， ①加载完成后进入一个长图，向左滑动页面，不断出现新的内容，内容：1988年的追星——听磁带，2018年的追星——与明星同框。②最后点击播放视频，视频内容：1988年，一对父子一起听小虎队的歌，2018年，相似的一对父子坐在一起，听TFBoys的歌，视频中小虎队和TFBoys表演歌曲《爱》交错播放。最后画面进入品牌宣传，曾经的孩子也成了爸爸，祖孙三代一起聚在肯德基用餐，时代滋味，允指回味。
设计上，采用手绘动漫的风格，使用颜色丰富，小清新。1988年与2018年，追星方式的变化，音乐媒介的变化等等，给人以冲击。
交互上，向左滑动屏幕。
体验上，屏幕只可以竖屏浏览，整个动画不是很多，只在进入或离开的时候出现。同一首歌，30年的时光，一样的动作，不一样的偶像。

技术实现： zepto.js+pixi.js+canvas

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

标签