如何做出“Levi's最酷夏天”这样的互动广告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是将多张图片PHOTO逐桢显示, 呈现出动画效果的一种技术。 Cinemagraph效果的核心实现, 正是采用了这一技术。

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

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

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

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

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

  触摸路径检测

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

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

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

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

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

相关文章
  • 如何在PDF文件中修改图片透明度?
  • U盘写保护操作如何解除?
  • 如何用太极刷机大师进行数据备份与恢复?
  • nasa旅行者号教会我们如何聆听太空
  • 电视盒子如何选择,电视盒子哪个好
  • 如何获得win server 2008操作系统序列号
  • 如何建设SEO优化一个全新的网站
  • 如何快速学习javascript?我的java之路!
  • iPhone X的整体感觉如何
  • 如何识别听到的歌名?百度音乐听歌识曲怎么用?
  • 发表评论
    阅读排行
    相关热门
    网站帮助 - 广告合作 - 下载声明 - 网站地图