pc软件 文章资讯 手机软件

您当前的位置→图文中心软件教程如何做出“Levi's最酷夏天”这样的互动广告
阅读排行

如何做出“Levi's最酷夏天”这样的互动广告


2015/6/7  编辑:admin 来源:本站整理

最近Levi's“换”醒你的夏天国内首个Cinemagraphic互动广告很火。

  什么?

  你没听说过?

  不知道没关系, 旋转门在这里:Levi's“换”醒你的夏天 国内首个Cinemagraphic互动广告

  http://www.digitaling.com/projects/14516.html

  那么如何才能做出这样一款高大上的互动广告呢?

  小编就从H5制作的角度来谈一谈, 这样的广告究竟使用了哪些技术。

  Canvas技术

  Canvas是一种可以将整个H5当作photoshop画布的一种处理办法。 在之前我们常见的互动广告中都有用到。

  比如大众点评的“我们之间就一个字”

如何做出“Levi's最酷夏天”这样的互动广告如何做出“Levi's最酷夏天”这样的互动广告 arpun.com

  Canvas把H5网页当作画布来使用, 可以在上面画出位图, 画出AE特效, 实现各种神奇的效果。

  Sprite动画技术

  Sprite是将多张图片逐桢显示, 呈现出动画效果的一种技术。 Cinemagraph效果的核心实现, 正是采用了这一技术。

  以Leves这个广告为例, 图片中女孩头发飘动的效果, 就是用了不同的桢, 反复在画布上绘制。

如何做出“Levi's最酷夏天”这样的互动广告

  那sprite动画相比传统的gif动画,有哪些优势呢?

  1.sprite动画可以控制画布, 只改变局部区域, 因此动画的尺寸更小, 更节省流量, 加载速度更快。 在同样加载速度的情况下, 画面可以更精致。

  2.sprite动画可以更方便的增加交互功能, 比如滑动手指, 画面跟随手指运动。

  触摸路径检测

  在推动女孩荡秋千的时候, 用户被提示要画一条圆弧, 才能完成推动的操作。

如何做出“Levi's最酷夏天”这样的互动广告

  同样在扬起水龙头的时候, 也需要画一条弧线。

如何做出“Levi's最酷夏天”这样的互动广告

  这里H5需要检测用户是否画了一条圆弧。

相关文章

SEO如何选择关键词?在什么位置加入关键词合理呢?:对于关键词排名来说,如何选择关键词?在什么位置加入关键词合理呢?一般来说,页面最多承载三个以内的主关键词,但是个人建议,最好一个页面只有一个核心关键词,参考百度百科的做法,除了核心关键词,还可以在页面中部署一些相关长尾关键词。

如何禁止QQ空间视频自动播放?:如何禁止QQ空间视频自动播放?方法一1、打开手机QQ,进入“联系人”主界面,点击屏幕右下方的“动态”,再点击“好友动态”,然后点击“我的头像”,...。

如何使用美图秀秀批处理图片?:1、打开美图秀秀,点击下载美图秀秀去广告版3.9.5.1001最新版点击四个大功能当中的“批量处理”功能,2、之后就会进入到批处理的主界面,如图所示,我们点击绿色区域的“添加多张图片”功能,3...。

发表评论
网站帮助 - 广告合作 - 下载声明 - 网站地图