把《星球大战》字幕搬进图文,这种3D倾斜滑动效果太抓眼球了

i排版编辑器

发布于:2026-11-04

摘要:

同样是向上滑动图片,让滑动图稍微倾斜一下,感觉就会大不相同。


向上滑动试试:


 

                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            


*素材来自海鸥表宇宙执笔

组件:双层滑动-前景倾斜上滑 

编号:11807(组件)

双层图片,底图不动,前景滑动图随手指向上倾斜上滑,带着3D倾角往上升,就像《星球大战》电影字幕一样把细节推到眼前。


常见的双层滑动,底图放场景或卖点骨架,前景滑动图放可滑动的产品细节。


而这个双层前景倾斜上滑效果,多了一个倾斜角度给人一种高级空间感,怎能不吸引眼球?


下面就以上方海鸥表的排版为例,一起看下怎么实现吧。



详细教程:


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

组件:双层滑动-前景倾斜上滑

编号:11807(组件)


第1步:选择组件


登录i排版SVG编辑器后,点击编辑器左侧「组件」按钮,在「滑动」分类中找分类中找到「双层滑动-前景倾斜上滑」组件,或者直接搜索组件编号11807,点击选择。



第2步:上传图片素材


点击右侧「换图」和「+」按钮分别上传背景图和前景图。

背景图和前景图尺寸需一致,滑动范围由背景图决定,一般正好占据手机一屏最为合适。前景图需要透底。

滑动图可上传多张,上传的滑动图会自动无缝拼接在一起。滑动图宽度需与背景图宽度一致。


注意最后一张滑动图的尾部请预留一定高度的空白,因为当图片倾斜时会吃掉尾部一部分内容。

第3步:调整动画参数


右下方分别调整滑动图的倾斜角度和视角远近(值越小视角越近)。

注意倾斜角度设置过大会偶现中间层不滑而整体滑动的现象,所以不建议倾斜角度设置过大。一般保持默认设置即可。


如果发现滑动显示高度不是自己想要的效果,可以通过「加减滑动显示高度」设置调整。想增加显示高度,输入正数;想减小显示高度,输入负数。


第4步:导入公众号后台


点击最右侧「预览草稿」扫码预览效果,效果满意后点击「同步至微信后台」就可以了。



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


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




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

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

图片

● SVG交互排版👇🏻

 





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

 


图片

图片

                            
图片