发新帖

  • 套用这个样例 看起来就像定制的——手把手教你做双11活动H5
  • 易企秀88   2016-11-03 23:48:59
  •   [复制链接]
  • 20015    73

  • 开始之前
    先来欣赏一下今天要教大家制作的样例

    3-1.png

    潮牌球鞋双十一返场优惠券!

         这是一个双十一的场景,虽然不能说多酷炫,但是乍一看很像为用户定制的场景。
    可是,实际上-场景中所有图片均可编辑替换。

        下面以本场景的一个商品展示页为例,讲解一下其中几个关键点的想法和“诀窍”。

    1. 酷炫动画解析
    本场景的亮点在于所有商品图都有一个实物向酷炫效果变化。
    3-1.1.png 3-1.2.png

    这是一个“虎人”的特效,而其实原理很简单,只是在商品图上淡入了一张自带特效的png图片。
    3-2.png

    没错!这其实是一张局部20%透明的图片。
    有了这张png做法宝,接下来就要合理的配置动画来达到酷炫的效果了,如下图:
    3-3.png

    小结:
    关键点一:用Photoshop制作一张酷炫png图片;
    关键点儿:合理配置动画时间和延迟。

    2.滚动字幕教程
    3-4.png 3-4_fse.png 3-4_7ch.png 3-4_4n5.png

    本页第二相对酷炫的动画就是右侧不停滚动的“SALE”字幕。而这个动画的实现也非常简单,不用gif图,完全依靠易企秀编辑器的功能就能实现。
    详细介绍如下:
    01.通过文字编辑编辑文字,旋转90度得到想要的角度;
    3-5.png
    02.为这个文字添加动画,12.6秒从下向上弹入,非常合理;
    3-6.png
    03.对“sale”进行复制粘贴操作三次,得到三个“sale”
    3-7.png
    04.对三个副本的动画延迟分别设定为3秒、6秒、9秒
    3-8.png 3-8.2.png 3-8.3.png
    05.同时选中四个文字,单击右键分别选择水平和垂直居中对齐
    3-10.png
    06.将他们放在你想放的位置上;

    最关键的就是这步。点击发布,然后看着酷炫的特效得意吧!
    3-12.png

    小结:关键点是如何设置延迟和动画时间。


    回帖福利:
    想学什么样的样例?留言给小编
    小编按你需求上样例
    回帖奖金币  回帖奖金币  回帖奖金币

    回复
  • 最新评论
  • 添加评论
  • 发表于 2016-11-5 10:39:25 | 显示全部楼层
    最后应该留个二维码  看效果
    回复 支持 1 反对 0
  • 发表于 2016-11-4 16:28:10 | 显示全部楼层
    炫酷
    回复
  • 发表于 2016-11-5 17:17:08 | 显示全部楼层
    小手一点,轻松拿分

    点评

    厉害厉害啊,多多指教,前辈  详情 回复 发表于 2016-11-5 19:19
    回复 支持 反对
  • 发表于 2016-11-5 18:47:31 | 显示全部楼层
    厉害了,我的哥,很棒。
    回复 支持 反对
  • 发表于 2016-11-5 19:19:08 | 显示全部楼层
    第一次用这个软件,有些不懂得地方,简单的这样看教程还是比较费劲
    回复 支持 反对
  • 发表于 2016-11-5 19:19:38 | 显示全部楼层
    ex1102713143719 发表于 2016-11-5 17:17
    小手一点,轻松拿分

    厉害厉害啊,多多指教,前辈
    回复 支持 反对
  • 发表于 2016-11-6 21:11:45 | 显示全部楼层

    厉害厉害啊,多多指教
    回复 支持 反对
  • 发表于 2016-11-7 14:43:38 | 显示全部楼层
    太厉害了!非常喜欢
    回复 支持 反对
  • 发表于 2016-11-7 16:07:22 | 显示全部楼层
    好看个哈哈哈
    回复 支持 反对
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

  • 易企秀88
  • 城管
    • 430
      积分
    • 196
      金币
    • 62
      帖子
    猜你喜欢
    快速回复 返回顶部 !pub_help!