KPL王者荣耀职业联赛：不拼一下，怎么知道自己是王者！

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

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

识别图中二维码

不拼一下，怎么知道自己是王者！-查阅二维码

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

案例：不拼一下，怎么知道自己是王者！

出品：KPL王者荣耀职业联赛

亮点：

策划上：视频类+互动海报生成类。H5的上方有一个引导视频播放的按钮，点击播放后磅礴大气的背景音乐随之响起，扁鹊一句耳顺能详的台词“生存还是死亡，这是个问题”就将我们带入了一个黑白中国风的王者江湖。孙尚香、孙悟空、李白相继出现，视频通过镜头的空间切换与龙啸狼嚎等细节的烘托，这些我们熟知的英雄在山峦起伏的大地呈现出一种舍我其谁，独孤求败的传统武侠感。在最后“王者之路，致竞巅峰“的品牌slogan出现，点出了视频主题的同时，也让人的热血沸腾到了最高点。看完视频后，玩家还可以自由创作海报，拼出属于自己的王者巅峰海报，也很好的呼应了H5的标题——王者，是拼出来的。

设计上，这个视频的画面来源于KPL和涂手合作的画图活动“巅峰上的王者”。在2017年KPL王者荣耀职业联赛秋季赛总决赛到来之际，各个大触用双手让心目中的英雄、选手、明星站在了王者之巅。以黑白手机涂鸦结合中国风的跨界创意，涂手将征集到画面重新制作成视频，最后融入动效，每一帧的画面都十分精细，每一秒都可以是精美的壁纸。

体验上，整个H5的交互十分简单易懂，除了上方的点击视频播放的按钮之外，下方还有一个【创作总决赛助威海报】的按钮。只要伸出手指戳一戳就能让自己的本命英雄出现在画面上，与其同时还能变幻不同的字体，生成专属的王者海报。这个让手残党，一秒变大触的设定也是大大刺激了人们的分享欲望。

技术实现： jQuery + CreateJS + Video

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

标签