优酷 + 阿里妈妈：这！就是歌唱-对唱季

2018-10-11 H5案例分享 H5案例分享

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

识别图中二维码

这！就是歌唱-对唱季-查阅二维码

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

案例：这！就是歌唱-对唱季

出品：优酷 + 阿里妈妈

亮点：

策划上，以“某首歌里，住着你们的故事”开始，首先，写下你的名字；而后，有四类大选项，第一个是“这首歌”，横向滑动屏幕选择，一共有30首歌曲和经典歌词供选择；第二个是“在那里”，一共10个歌曲图片的动图背景；第三个是“我们俩”，一共10个男女相处动作动图；第四个是“晴或雨”，一共5个天气状态。可以选择[录入我的歌]，自定义歌曲名、作者&演唱者、打动你的两句歌词。都选好后，点击[生成我的故事]。生成一张属于你的动画gif动图。
设计上，黑白色调，人物外形轮流。只有嵌入的品牌王老吉是红色。
技术上，动图合成，使用的是https://github.com/jnordberg/gif.js 了解更多使用细节。
体验上，图片的生存，一般都是静态的图片，这案例采用的是动图，最后生成的也可以是动图，感觉很棒。

技术实现： swiper.js + gif.js

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

标签