图片轮播像Apple这样,那就真的泰裤辣!

原创 收藏 评论
举报 2023-05-06

Apple公众号最新推送的次条,有下面这样一个图片自动滚动的排版效果,有小伙伴来问怎么做。

 



*GIF录自Apple《月度音乐杂志 Vol.14 | 跟着世界一起听》


其实很简单,在编辑器搜索选择「自动-向左滚动条」组件(编号:10888)和「自动-向右滚动条」组件(编号:10889)然后上传素材就完事,还可以调整图片滚动的时间。

1.gif

组件:自动-向右滚动条

编号:10889(组件)


说到Apple的图片自动展示效果,小品哥更想推荐给大家这个效果:

 

2.gif

*素材来自Apple《技能便利店 Volume 5:学上几招,春节尬聊饭局丝滑通关。》


组件:Apple同款-停顿放大式切换轮播-向左

编号:11535(组件)


它像网站banner又比banner更高级,当轮播到中间时,图片会放大切换为另一张图片进行重点展示。


如果轮播的图片可以点击跳转超链接或小程序,放在文章末尾用作拓展阅读也会更有吸引力。


这次点击轮播图试试:

3.gif

*素材来自Apple《技能便利店 Volume 5:学上几招,春节尬聊饭局丝滑通关。》


组件:停顿放大式切换轮播-向左(超链接)

编号:11536(组件)


该效果同样使用 iPaiban Pro 黑科技编辑器就能制作,我们以「Apple同款-停顿放大式切换轮播-向左」为例,一起看下教程吧:


*支持点击跳转超链接或小程序的效果,使用相应组件后的制作方法基本一致,只是多了一步输入超链接或小程序。


详细教程:


工具:iPaiban Pro 黑科技编辑器,网址:x.iPaiban.com

组件:Apple同款-停顿放大式切换轮播-向左

编号:11535(组件)


第1步:选择组件


登录 iPaiban Pro 编辑器后,点击编辑器左侧「组件」按钮,在「自动」-「 Banner/轮播 」分类中找到「Apple同款-停顿放大式切换轮播-向左」组件,或者直接搜索组件编号11535,点击选择。



第2步:上传图片素材


为了让大家更好得了解该效果的素材组成,该组件提供有默认素材。上传自己的素材前请将默认素材全部删除。


删除默认素材后点击第一个「+」号上传准备好的自动轮播图,点击第二个「+」号上传与自动轮播图对应的切换图。所有图片尺寸需保持一致。



第3步:调整动画参数


在上传图片位置的下方,可以调整轮播动画的参数,如无特殊要求保持默认即可。



点击最右侧「预览草稿」可预览效果。通过单独调整某一参数然后预览效果可以判断这一参数的作用哦。


第4步:导入公众号后台


效果满意后点击「同步至微信后台」同步到自己的公众号就可以了。



使用同步功能不用频繁在编辑器和微信后台切换,同步成功后可以立即扫描二维码预览在公众号的效果。


如需局部导入可参考:《iPaiban Pro小助手安装和使用教程》




制作SVG交互图文认准 iPaiban Pro 黑科技编辑器,网址:SVG.iPaiban.com,复制网址在 PC 端 Chrome(谷歌)浏览器打开,即可开始注册并使用。

新用户在「新手礼包」可领取3天企业标准版会员体验权,以及22个常用必备组件的大礼包(1年)。随礼包附赠千元优惠券,每单最高立降500元。

GIF2.gif

本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
转载请在文章开头和结尾显眼处标注:作者、出处和链接。不按规范转载侵权必究。
本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
未经授权严禁转载,授权事宜请联系作者本人,侵权必究。
本内容为作者独立观点,不代表数英立场。
本文禁止转载,侵权必究。
本文系数英原创,未经允许不得转载。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权,侵权必究。

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    DIGITALING
    登录后参与评论

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    800

    推荐评论

    暂无评论哦,快来评论一下吧!

    全部评论(0条)