优酷 + 阿里妈妈:这!就是歌唱-对唱季

2018-10-11 H5案例分享 H5案例分享
优酷 + 阿里妈妈:这!就是歌唱-对唱季


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

识别图中二维码

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

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


案例:这!就是歌唱-对唱季

出品:优酷 + 阿里妈妈

亮点:

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



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



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

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

优酷体育:加入我的梦想绿茵军团

优酷体育:最强点球大战

10个案例了解H5之图片合成

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

方式一:

通过H5案例提交小助手(微信小程序)
微信扫描下方二维码进入,进行投稿

方式二:

在电脑端,进入H5案例发布界面,自己编写

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~