• 首页Portal
  • 官网
  • 最新
  • 易企秀学院
  • 分类
关闭
回复
套用这个样例 看起来就像定制的——手把手教你做双11活动H5 分享 分享 收藏收藏 7 点赞点赞 13
  • 易企秀88   2016-11-03 23:48:59
  •   [复制链接]
  • 20549    77

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

    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

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


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

  • 最新评论
  • 添加评论
  • maple7752
    最后应该留个二维码  看效果
    发表于 2016-11-5 10:39:25 点赞 点赞 1 回复 回复
  • ex1010314490912
    漂亮,学习了
    发表于 2018-4-16 20:58:48 点赞 点赞 回复 回复
  • biu~biu~biu~
    很实用!!!111
    发表于 2018-2-13 15:50:52 点赞 点赞 回复 回复
  • wx_B52zsrWL
    学习了!
    发表于 2018-2-3 08:12:54 点赞 点赞 回复 回复
  • eqs_X1Dz8DdTT8
    炫炫
    发表于 2018-1-26 09:35:03 点赞 点赞 回复 回复
  • ex1121911182313
    炫酷给了我们灵感,感谢分享
    发表于 2018-1-26 09:30:50 点赞 点赞 回复 回复
  • 564022533
    https://h5.scene.eqh5.cn/s/d6b3VigP 企业宣传 稳重大气 可套用
    发表于 2017-12-26 14:19:38 点赞 点赞 回复 回复
  • eqs110232238581
    自己动手丰衣足食
    发表于 2017-12-15 10:51:16 点赞 点赞 回复 回复
  • ex1051713454614
    赞!不错,好有水平
    发表于 2017-11-13 17:55:14 点赞 点赞 回复 回复
  • 木茗
    厉害了,我的哥,很棒。要是再有个最终成果展示就更好了。
    发表于 2017-11-1 10:50:52 点赞 点赞 回复 回复
    快速回复 返回顶部 !pub_help!