新华社公众号中国航天日推文怎么做的?

如何利用135编辑器的SVG编辑器功能,无需任何代码知识,也能制作出新华社刷屏朋友圈的双层上滑视差滑动效果。本教程详细指导您如何上传素材图、调整滑动速度和位置,以及如何将炫酷的交互效果同步至微信公众号后台。无论是设计新手还是老手,都能快速上手,创造出沉浸式阅读体验。抓住五一特惠,立即动手实践,让你的公众号文章脱颖而出!

朋友们大家好,我是三儿


前两天是中国航天日。


相信不少朋友被新华社这篇推文刷屏了👇


👆点击遥远璀璨星空


有朋友抢答道:这不是三儿之前给大家讲过成都发布利用三层上滑,完成了一篇科技感十足的【流浪地球】吗👉点我回顾


不过当你仔细对比后,你就能发现新华社这篇文章和成都发布还是有差异的。


新华社没有中间固定图,他只有背景和前景图所以他只是一个双层上滑,加上滑动时每个前景图在滑动过程中视觉上更有立体感,阅读沉浸体验更佳,所以新华社这篇文章本质上是使用了视差滑动和成都发布的三层滑动是有质的区别的。


前面铺垫了这么多,相信大家迫切想要知道这个炫酷的效果如何制作?


那咱们闲话少叙,进入今天的重头戏。


01
进入SVG编辑器


在135编辑器左侧找到【SVG编辑器】



我们可以搜索:背景双层变速视差滑动(竖向)或是组件ID:267



在使用组件前,我们一定要记得先看看素材要求,这样在作素材图的时候就能按照要求制作,也能避免后续因为素材原因返工。


02
上传素材图


这里我们借用新华社的图为例,我们利用135插件提取文章素材(注意:提取别人素材仅作教学使用,不能擅自商用!!!)



根据素材图,我们能很轻松找到背景图,是由璀璨星空点缀的黑色背景图。



我们在SVG编辑器中上传背景图。



接下来就添加滑动画面,每一屏添加的素材内容数量视情况而定,你可以添加3-5个素材然后多添加几个滑动画面,也可以在一个滑动画面中多添加几个素材,这个没有固定要求。


*不过并不建议大家图方便把所有素材放在一个滑动画面中,拆分越细,效果越佳。



上传好滑动图后,就需要调整各个滑动图之间滑动速度,位置。



接下来就是不断地重复这个工作,上传图片,调整滑动速度,以及素材之间的位置,这是一个非常考验耐心的过程,因为每一次调整最后的呈现效果都可能不同,我们多一点耐心,多一点尝试,最后就能让素材呈现效果达到完美。



在制作完成后,我们就可以选择【同步】到微信公众号后台,或者【导出】到135编辑器。






三儿说:

不少朋友看了,给三儿反馈:你这个看起来是【设计】难度更大呀,反而操作难度降低了,可是亲爱的朋友你有没有想过,正因为135编辑器将交互效果制作成组件,降低了操作难度0代码,能让所有朋友都快速上手,过去要操心图片素材,效果制作现在只需要完成素材,整个交互效果的制作自己就能轻松搞定,再也不用去找人帮忙完成交互效果了。正因为整个交互操作变得简单了让大家渐渐忽略了它,这正是我们135SVG编辑器的初衷,让人人都能轻松完成SVG交互排版。


以上就是本次

新华社视差滑动的全部内容了

相信聪明的你已经学会了

眼睛学会了

记得要动手练练哦

五一将至

三儿也准备了五一特惠好礼

可别错过哦





又学“亿”招


·



·

文章申明:本文章转载自互联网公开渠道,如有侵权请联系我们删除
文章评价
登录后可以评论
立即登录
分享到