Apple都爱不释手的双层滑动样式(三步包你学会)

胖友们大家好呀,我是三儿,今天三儿就来给大家介绍双层滑动svg样式,三儿用它做了一个待办清单,胖友们可以左右滑动查看更多。

左右滑动查看更多


滑动的时候只滑动上层图片,是不是有点意思?苹果的这篇推文也是利用了双层滑动这个原理,👉点我查看苹果原文



想学吗?那就接着往下看!




一、如何更换内容?

 
 


135编辑器对SVG样式做了更新,在专业版中特意添加了『动画』按钮,胖友们可以在『动画』设置中对SVG样式进行修改。








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








2.搜索样式ID:100287,找到『双层滑动样式,插入至编辑器中。







3.点击选中样式(在样式周围出现虚线框时,才算选中哦!),在弹出的菜单栏中,选择『动画』按钮,进入动画设置界面。



这里需要注意的是:只有SVG样式才会有动画按钮哦,普通的样式是没有动画按钮的!









4.进入svg动画设置界面,点击图片上传』,分别更换背景图和滑动的几张图片即可。



注意:滑动的图片必须是png图片,才可以制作出双层滑动的效果。









5.设置完所有内容以后,点击右侧菜单栏中的『手机预览』进行测试,查看效果。




双层滑动样式适用的场景很多:电商商品展示、滑动查看对比……只要脑洞够大,双层滑动可以帮你完成各种创意推文!


注意事项:


这里需要注意的是,由于微信后台限制,所以排版完成后的推文需要使用保存同步功能,如果使用复制粘贴会导致样式失效!



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

胖友们学会了吗?

学会了就赶快安排上吧


看在三儿分享干货的份上

点个在看呗~

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

也可以留言告诉三儿

三儿全方位解答




·EN

文章排版由135编辑器提供技术支持

 ■ ■ 

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