如何像人民网一样展开卷轴?点我马上get!

为你们揭秘人民网公众号的点击展开卷轴的效果到底如何实现吧!



嘿,胖友们大家好呀,我是三儿!


这两天各大官媒好像约定好的一样,纷纷开始朝着SVG创意文章进军,先是人民日报《点亮武汉》的横空出世,打响了这场SVG角逐的第一枪,随后新华网、人民日报、人民网纷纷出手,大家是你来我往,好不热闹!


然鹅这波操作彻底看傻了广大新媒体小编,这到底是是咋做的?我也想做啊!于是纷纷找到了三儿,让三儿出一波最近大火的SVG教程。


诶,问我那你们可算是找对人了!经过三儿缜密的分析,认真的推理,发现这个推文也太简单了吧~


今天,三儿就来为你们揭秘人民网公众号的点击展开卷轴的效果到底如何实现吧!


话不多说,教程来咯!






1
样式展示


在开始教程之前,我们先来看一下这篇文章的效果。



怎么样,是不是超级炫酷!那这种炫酷的SVG在135编辑器中该如何实现呢?


这个简单,在135编辑器搜索样式『卷轴』或搜索样式ID『98461』即可收藏使用!



先说说为什么会使用卷轴这种展现形式,就拿人民网的这篇文章距离,文章内容主要是讲2020年两会的政府工作报告内容,用长图的形式展示,比纯文字更便于阅读,而且加上卷轴徐徐展开的效果,给人耳目一新的感觉。


了解完了这些,我们就来看看该如何使用这个样式吧!






2
使用教程(文字版)



01
制作要求


1、卷轴内要求放置图片,图片的大小不得超过10M,如果提示单张图过大,需要将图片裁剪为多张图片进上传。



还可以在文章中放置GIF图片哦,三儿建议GIF图片不宜过大,控制在5M以内,避免用户加载时间过长造成不好的阅读体验。


2.使用此样式,需要使用保存同步功能,将编辑好的文章直接同步至微信后台,不然可能会导致SVG样式失效。




02
切换专业版菜单栏
TITTLES


要修改这个样式中的图片,我们可以利用编辑器专业版进行操作,非常简单!


首先先将编辑器切换至专业版,点击右侧『更多功能』,在弹出的菜单中选择『切换专业版』,即可将编辑器切换为专业版。



PS:要调整SVG样式,必须要使用专业版菜单栏才能编辑。



03
修改样式
TITTLES


1.将样式插入至编辑器中,点击样式,在弹出的菜单栏中,点击『动画』按钮。



PS:这里需要注意的是,点击样式后才会弹出菜单栏!另外,只有SVG样式才会显示『动画』按钮,其余样式均不会出现『动画』按钮。



2.在SVG动画设置中,我们可以点击『图片上传』按钮,将样式内的图片进行更换。



这里我们需要了解的是,卷轴顶部和卷轴底部都是一开始就展现在读者面前的。中间的部分是点击以后才会缓缓展开。


在动画设置中,我们可以对卷轴中间部分的内容进行更换,胖友们也可以自己设置卷轴样式进行替换。



3.在上传图片时,我们需要选择自由模式进行上传,这样能更好的适配素材尺寸。



将模板中的图片一一替换后,我们就完成了样式的调整。





3
常见问题


怎么样,是不是特别简单!接下来,三儿整理了一些常见的问题,给胖友们做了一个汇总。

01
顶部图片过高
TITTLES

胖友们在上传图片时,可能会发现顶部的图片比模板要高,导致顶部图片部分被遮挡。出现这种情况,我们可以通过HTML代码进行修改。


1.将所有图片上传完成后,点击编辑器左上角的『HTML』,进入代码编辑模式。



2.在HTML代码界面,找到三儿下面标注出来的代码,对代码内容进行调整。这两部分代码,一个代表的是高度,一个代表的是动画的初始值。


 <svg opacity="0" preserveaspectratio="xMidYMin meet" style="height: 50px;width: 345px !important;" viewbox="0 0 750 50" width="100%" xmlns="http://www.w3.org/2000/svg" height="2311">

                    <rect width="750" height="10000" x="0" y="0" style="fill: #000000;"></rect>

                    <animate data-svg-style="135-click-move" attributename="height" fill="freeze" restart="never" keytimes="0;0.15;1" values="50;2311;2311" dur="83s" begin="click"></animate>

                </svg>


既然是顶部图片部分被遮挡了,那我们只需要将这个数值改的大一些即可。



在这里需要注意的是,两个代码的数值需要保持一致。


修改完成后,我们再次点击『HTML』按钮切换回编辑界面,点击右侧的『手机预览』看看显示是否正确,如果依然被遮挡,那么再次进入『HTML』模式修改数值即可。

02
样式内如何增减图片
TITTLES


胖友们在进行图片替换时,可能会有模板不够用或者多出的情况。不用担心,我们在『动画』设置界面即可对模板进行增加或删除的操作!有再多的内容也不怕塞不下啦!






卷轴样式使用的场景非常广泛,除了使用卷轴效果外,三儿还为你们找到了很多大号都在使用的创意玩法,一起来看看吧!


(点击图片查看详情)

(点击图片查看详情)

(点击图片查看详情)



好啦,今天的教程就到这里啦

胖友们学会了吗?


如果你还有关于其它样式的疑问

都可以留言告诉三儿哦

福利时刻-免费领取7天135编辑器VIP会员】


点击https://www.135editor.com/users/invite/ddb12a17ce400c35fe041d275a578351,注册135编辑器,即可获得7天VIP会员




文章评价
登录后可以评论
立即登录
分享到