网易新闻 X 网易汽车 X GOLF高尔夫:沉迷毒鸡汤的你是不是又“丧”了?

2017-11-14 H5案例分享 H5案例分享
网易新闻 X 网易汽车 X GOLF高尔夫:沉迷毒鸡汤的你是不是又“丧”了?

案例:沉迷毒鸡汤的你是不是又“丧”了?

出品:网易新闻 X 网易汽车 X GOLF高尔夫

亮点:

  1. 策划上,长图类,长图采用竖屏浏览的模式,打开声音慢慢向左滑动,去看看各种燃。① 首屏一位坐在车里的营销人手拿新高尔夫创意营销方案,叹息地说看客户这种态度大概不可能成功了吧。②而后随着不断的滑动,依次展现了2017年、2008年、2003年、1997年、1991年、1980年代、1970年代的各种“燃”事画面,并加上同步的旁白,然后以日历的方式,将前面所展现的年份+当年的“燃”事与高尔夫汽车发展史巧妙结合起来,再然后回归到初始场景,展现自己的态度“压力再大,那又怎样,我要燃起来!”。③ 这时领导来消息满意你的想法,你看到消息后启动新高尔夫汽车跑远,并出现slogan “年轻就要一起燃”,点击按钮跳转到下一屏,而后可选择生成“燃”海报、再“燃”一次或观看故事背景。
  2. 设计上,颗粒漫画风格,超长横屏动画,整体以视觉差为主,再加同步旁白,而后添加细微动画,动画风格细腻,然后添加撕日历效果, 最后选择自己心仪的海报画面采用的是带有不同颜色边框的图片左右切换效果。
  3. 技术上,长图滑动采用的是滚动效果插件ScrollerJS来实现的;里面的视觉差动画的实现方式主要采用的是Canvas + PixiJs + TweenMax。
  4. 体验上,loading有些慢,loading结束,首屏画面显示异常,是竖着显示并只占了一半的屏幕,看到这种画面稍后才切换到正常画面,这点体验很不好啊。而且感觉营销人面临可能被客户否决的压力,与2017年到1970年的各种燃事相结合有些牵强,不过画面里的效果做的还是很不错的。



技术实现: Zepto + ScrollerJS + PixiJs + TweenMax



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

识别图中二维码

沉迷毒鸡汤的你是不是又“丧”了?-查阅二维码

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



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

标签

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

相关推荐:

网易新闻 | 哒哒:先找自己再找爱

爱卡汽车:2017XMEETING车迷大会

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~