618推文开篇即高能!两个自动开场动效请收好

i排版编辑器

发布于:2026-05-22

摘要:

618活动促销图文,你是否也想来个高级开场?看下这个:





组件:自动-多图缩小切入+浮现

编号:11854(组件)

打开图文后,缩小切入多张图片,然后浮现内容。


文章开头的几屏,能否第一时间抓住眼球、营造促销氛围,直接决定了用户愿不愿意往下滑。


这个效果不需要用户点击,打开图文就会自动播放动画,非常适合用在618文章的开场,瞬间带出「抢购」「爆款清单」的节奏感。


类似的还有:


图片
*原效果为一次性动画,为了更好得查看动画效果,此为录制的循环GIF动图。



组件:自动-图片缩放+浮现

编号:11869(组件)

都是很有节奏感的自动动画效果,具有一定的视觉冲击力。


以第1个效果为例,一起来看看如何实现吧。



详细教程:


工具:i排版SVG编辑器,网址:SVG.iPaiban.com

组件:自动-多图缩小切入+浮现

编号:11854(组件)


第1步:选择组件


登录i排版SVG编辑器后,点击编辑器右侧「组件」按钮,在「自动」分类中找到「自动-多图缩小切入+浮现」组件,或者直接在搜索框中搜索组件编号11854,点击选择。


图片


第2步:上传图片素材


在右侧需要上传三部分图片:背景图、背景图2和缩小图。


背景图为直接显示的图片;背景图2为其他动画结束后浮现,可不传;缩小图为依次缩小移入的图片。背景图和所有缩小图的尺寸需保持一致。


点击「换图」按钮分别上传背景图。



点击「+」按钮依次上传缩小图。



第3步:调整定位区域


双击编辑区域上传的图片,在出现的窗口中,拖动红色色块调整缩小图的定位区域(被红色色块选中的为主要放大画面,在缩小前将会显示在图片正中央)。


点击「下一张」可依次调整。


图片


第4步:调整动画参数


设置调整3个参数浮现动画时间、缩小动画时间和缩小图片初始倍数


图片


第5步:导入公众号后台


点击最右侧「预览草稿」,效果满意后点击同步至微信后台同步到自己的公众号就可以了。


图片


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


如需局部导入可参《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。




制作SVG交互图文认准i排版SVG编辑器,网址:SVG.iPaiban.com,复制网址在 PC 端谷歌浏览器打开,即可注册,编辑器所有组件/组合现已全部支持免费试用了。

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

图片

● SVG交互排版👇🏻

 





iPaiban 团队可提供运营服务、视频制作、创意策划、多种风格设计、SVG交互开发等服务,如需定制,请添加玉兔微信(ID:playhudong15)沟通咨询。

 


图片

图片

                            
图片