欢迎光临散文网 会员登陆 & 注册

Apple同款|长图横滑排版,让布局更自由

2022-04-20 12:59 作者:黑科技编辑器  | 我要投稿


长图横滑

Slide Show


图文布局中的 CSS 滑动排版,通常其滑块会以等分的方式呈现,因而设计师切片时也一般直接采用平均切片导出。

但有时,我们会希望切图各自保持一定的完整性,形成非等分切片组成的横向超长图,正如 Apple 公众号在《待签收:Apple Park 新鲜送达》、《AirPods Max 高调奏响。》等推送中的处理方式——那我们应该套用 E2.COOL 编辑器的哪个组件来实现类似效果呢?

Apple官方原文截图
每张图宽度不一


SVG 编辑器中的这一组件,特性在于允许你上传特定数量的多个切片,但不要求你保持这些切片宽度的统一性,平台自动会将它们分配就位。

E2黑科技编辑器界面

不过注意,不限制切片宽度不等同于设计师可以过分随意切图,因为微信公众平台对于过宽的图片,是会高强度压缩尺寸的!原则上,我们建议你对切片的宽度上限控制在 2500px 以内,并通过该组件的筛选器合理选择数量。

E2.COOL 的专业级会员/企业级会员可使用该组件,即刻前往黑科技编辑器,在「滑动模块」大类中找到「长图横滑(默认10图)」畅快体验!

企业级会员额外可以通过自定义参数功能精确控制首屏画幅显示范围!具体方法是,在自定义参数功能中输入百分数,由此控制了整体滑动宽度相对首屏宽度的倍数。例如我们的最终滑动量跨过 10 屏,那么输入的自定义参数为 1000,因为 1000% 为 10 倍。


当然,如果你需要自由度更大的滑块布局方式,完全自主决定每个切片的漂浮位置,那么就必须结合「自由布局」大区的组件完成了。由此其操作的难度会更高,建议你先阅读《视频|想玩转「自由布局」组件的运营人看过来!》(https://mp.weixin.qq.com/s/nC3V2p3RrAHgbc7QklxrSA)学习。


编辑器网址:

https://www.e2.cool/


Apple同款|长图横滑排版,让布局更自由的评论 (共 条)

分享到微博请遵守国家法律