端午划划划划划划划划划划龙舟

小黄人科技

发布于:2026-06-17

摘要:

端午节习俗,除了吃粽子,还有一个是划龙舟


端午节图文,关于粽子的创意排版之前给大家拆解过一个案例,戳:抓住那个会飞的粽子!这篇阅读暴涨5倍的端午节排版怎么做?


今天再给大家推荐一个划龙舟的创意案例效果,手指下滑图片试试:


 








                                
                                
                                
                                

                                    

                                
                                
                                
                                



*素材来自i排版编辑器𒁽ξ=ξ=ξ=ゞ=ゞ=ヾヾヽ⪛

组合:三层下滑组合

编号:12150(组合)

普通的滑动布局太单调,静态海报又缺少生命力。这种三层穿透式下滑效果就正好。


排版结构分为背景层、中间层和前景层,其中中间层元素静止不动,背景层和前景层跟随手指向下滑动,根据相对运动原理,中间层元素就像是向上移动。


除了用作划龙舟的创意,三层穿透式下滑还有更多玩法,怎么玩就交给大家了。


今天给大家看下详细排版教程。


详细教程:


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

组合:三层下滑组合

编号:12150(组合)


第1步:选择组合


登录i排版SVG辑器后,点击编辑器右侧「组合」按钮,在「滑动组合」-「三层上滑组合」分类中找到「三层下滑组合」,或者直接搜索组合编号12150,点击选择。


图片


第2步:进入组合编辑模式


点击「编辑组合」,进入组合编辑模式。


在组合编辑模式中,分为「中间图和背景图」与「前景内容」两块设置区域。


图片


第3步:上传中间层和背景层图片


点击「中间图和背景图」区域,在右侧继续点击「换图」按钮上传1张中间层图片,点击「+」号批量上传多张背景层图片。


中间层图片应为镂空式,可以露出背景层图片。整个滑动显示画面大小由中间层图片尺寸决定。


图片


第4步:设置前景层内容


「前景内容」不局限于单纯的无缝图,还可以嵌套使用各种交互效果组件。


需要什么效果就在左侧「组件」分类中找到相应的组件拖动到组件位中,然后上传需要的素材即可。


添加组件位-拖动组件到组件位中-上传图片,每需要一个样式就按照这3步操作:


图片


注意,前景内容的总高度需等于背景图片的总高度。前景内容中的图片应有一定的镂空或透明度设计,以便露出后面的中间层和背景层图片,才能实现在滑动中穿插的效果。


第5步:导入公众号后台


内容编辑完毕后,点击左上角「保存并退出」退出组合编辑模式回到编辑器主页面。



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



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


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



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

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

图片

● SVG交互排版👇🏻

 





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

 


图片

图片

                            
图片