Apple案例教学 | SVG创意排版之长屏滑动！
前天直播教大家做超长图文竖屏滑动效果，
今天这篇文字教程，
总结了之前直播的操作要点，
来一起跟着练吧！
以Apple的案例为例：
点此查看原文案例：快，两款新 iPhone 能预购了。
????????动图演示教程效果????????
拆解
原文案例使用组合长屏左滑，实现全文长屏的左右滑动。
????????截图分别是左滑前和左滑后的效果????????
通过研究案例效果，确定使用组合：长屏左滑组合、组件：超链接-图片(无角标)、组件：批量无缝图(不可弹出)和组件：自动-多图连续切换(无限循环)即可实现。
制作
1、添加组合：长屏左滑组合，增加三个卡槽位，拖拽添加组件：超链接、批量无缝图和自动-多图连续切换；
2、编辑左侧编辑区
①点击组件超链接，添加底图，复制跳转链接；
原文链接：https://mp.weixin.qq.com/s/Ey3lu9DKb5arnCsAo_AyMQ
（注：受订阅号权限影响，本示例中超链接用案例原文链接代替。）
②点击组件批量无缝图，添加图片“无缝图”；
③点击组件自动-多图连续切换，添加图片底图和切换图，左侧完成；
3、编辑右侧编辑区
右侧重复左侧步骤，添加对应素材，点击保存并退出；
4、在组合：长屏左滑的外侧，添加组件批量无缝图，并添加图片“无缝图”；
5、点击右侧“预览草稿”，可初步预览草稿效果（以导入公众号后台预览效果为准）。
导入公众号后台
6、在i排版编辑器后台完成SVG交互图文后，点击右侧“导入微信后台”→点击“复制”；
7、打开微信公众号后台新建图文，点击浏览器右上角iPaiban Pro 小助手图标→点击“导入代码”→粘贴代码→点击“清空导入”；
8、操作成功后，记得添加标题、封面和保存，最后发送到手机预览最终的效果。
↓动图演示还原后的效果↓
下期直播预告
12月8日（周三）直播教学年终总结创意案例????扫码预约学习SVG交互效果????
完成预约后添加白露老师（微信 brandbailu）领取直播福利
本文系作者授权数英发表，内容为作者独立观点，不代表数英立场。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
本文系作者授权数英发表，内容为作者独立观点，不代表数英立场。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本内容为作者独立观点，不代表数英立场。
本文禁止转载，侵权必究。
本文禁止转载，侵权必究。
本文系数英原创，未经允许不得转载。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）