重叠叠叠叠叠叠叠叠叠叠叠展开
平级内容很多，又不想文章太长？
或许你可以试试这种具有重叠感的点击展开排版效果。
这也是一直以来都深受欢迎的一种排版形式。先来体验下：
*素材来自金典SATINE《啊切~谁在打喷嚏？》
组合：点击展开(有触发区)
编号：10051（组合）
组件：全局背景
编号：10465（组件）
看着像是新的交互形式，但其实就是多个展开的重复使用。
之所以会有重叠感，是因为在排版中每一个后面的展开都压住了前面展开的一部分内容。
如何能让后面的展开压住前面的展开呢？
很简单，使用「边距」功能。
在 iPaiban Pro 黑科技编辑器中连续插入多个「点击展开」组合后，将展开组合的上方外边距调整为一定的负值，所调整边距的展开就会向上压住前面展开对应的高度。
再来看1个效果：
*素材来自武汉广播电视台《拼过2024，可以这样看武汉》
组合：点击展开
编号：10307（组合）
组件：全局背景
编号：10465（组件）
这个效果和第1个效果相比，不同之处是点击展开前重叠，点击展开后不再重叠。它多了一个调整展开高度的步骤。
下面以第2个效果为例，一起看下制作教程吧。
详细教程：
工具：iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com
组合：点击展开
编号：10307（组合）
组件：全局背景
编号：10465（组件）
第1步：设置全局背景
①选择「全局背景」组件
点击编辑器左侧「组件」按钮，在「特殊」分类中找到「全局背景」组件，或者直接搜索组件编号10465，点击选择。
②上传图片
点击右侧换图上传全局背景图片。图片最好为纯色或背景简单一些，尺寸没有限制，全局背景会根据后面的内容自动按需重复。
这里设置全局背景的目的是，全局背景可以作为展开的背景，让交互前后衔接更自然。
第2步：设置展开效果
①编辑「点击展开」组合
点击编辑器左侧「组合」按钮，在「花样展开」分类中找到「点击展开」组合，或者直接搜索组合编号10307，点击选择。
点击「编辑组合」，进入组合编辑模式。在组合编辑模式中，我们需要分别设置展开前和展开后的内容。
②设置展开前内容
点击右侧「换图」按钮上传展开前图片。
③设置展开后内容
想要设置展开后内容，我们首先要确认展开后的内容有哪些交互效果，会用到哪些交互组件，然后在左侧依次拖动相应组件到展开后区域组件位中。
武汉广播的案例只用到一个无缝图，故拖动一个「全能无缝图」组件到组件位中，然后点击右侧「换图」按钮上传图片。
④设置展开时长
点击右侧红色小三角符号，可直接输入数值设置展开时长。
案例中后面的展开压住前面的展开73px内容，为了让前面的展开效果展开后不被盖住，前面的展开把展开高度增加73px，就正常显示了。
⑤保存并退出
内容编辑完毕后，我们点击左上角「保存并退出」编辑模式来到首页。
第3步：增加多个展开
继续选择「点击展开」组合，按照第2步的步骤进行设置。
第4步：调整外间距
除第1个展开外，将其他展开组合的上方外边距调整为负数。
这里的数值根据我们想要重叠的范围来定，比如武汉广播的这个案例设置为-73px。
第5步：预览效果并导入公众号后台
点击页面最右侧「预览草稿」可随时预览效果，尽量使用手机扫码预览。
调整效果满意后点击「同步至微信后台」就同步到自己的公众号就可以了。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）