利用秀米的SVG布局的穿透功能实现横屏长图互动原理+教程 | 您所在的位置:网站首页 › 秀米趣味滑动加文字介绍 › 利用秀米的SVG布局的穿透功能实现横屏长图互动原理+教程 |
昨天同事发给我这样一篇文章问我实现方式,如首图,点击文章闪动的部分就会跳到图片浏览模式,但并不是最外层的这张带有闪动点的图。文章到手之后首先我们需要点击F12,查看源代码,看看是哪个编辑器做的。结果没有发现135editor的痕迹,这个时候就比较头大,然后我又盯上了链接本身,这个链接确实和普通微信文章的链接看起来不太一样。 https://mp.weixin.qq.com/s/W6mSQW4ts40W-yTNlNGxSQ比我们常生成的链接要短得多。但是从链接本身找到的线索非常少。只能证明这是通过微信发布的文章。然后到秀米编辑器的用户群里去问了一下,刚好秀米有这种功能。群里大佬说这种功能是用穿透功能实现的。然后我在秀米中实验了一下,果然,功夫不负有心人,我最终实现了这种效果,下面就来教给大家这种效果怎么做。 1.首先点击新建图文, 2.在秀米左侧的功能区选择图文模板选择布局,选择基础布局, 然后在基础布局的模板里面找到SVG布局,(SVG布局支持自定义动画)。然后在SVG布局中添加你想隐藏在下面的图片。如果最终想要做出的效果是横屏的话,需要提前将图片旋转,这样用户最终看到的图片就是横屏模式了。 3.点击SVG布局最外层的框。选择动画。 4.设置图片穿透效果。 再预览的时候就会发现你的底层图片被上层图片覆盖了。点击图片位置就弹出了隐藏的图片。 |
CopyRight 2018-2019 实验室设备网 版权所有 |