首屏就能看到第2张滑动图,这种滑动排版是怎么做的?

原创 收藏 评论
举报 2022-09-14

说到图片滑动,无论哪个方向的滑动或者多少层的滑动,对素材的要求一般都是滑动图需尺寸一致。

但也不是所有滑动都有这个要求,我们来看苹果这个:

 54284d2c96b63a2835f6a1fbe89f3d07.gif

没动就看到了第2张滑动图的一部分,此时无需用箭头或文字提示我们就知道向左滑动可以查看更多。

这种滑动一般不要求滑动图尺寸一致,而只需高度一致即可。
当然如果我们切图时像下面一样切成尺寸一样的,也能排出同样的效果。但是请注意,像苹果这种每张滑动图都插入链接的就不行了,另外如果滑动图是GIF也不行,为了保持图片尺寸一致我们不可能对一张完整的GIF切分吧?
那今天给大家推荐的就是可以使用不等尺寸的双层滑动组件「Apple-双层滑动-前景左滑(不等尺寸图片滑动)」(编号:10380)和「双层滑动-前景右滑(不等尺寸图片)」(编号:10097),其中左滑的还有可添加超链接(编号:10377)以及小程序(编号:11121)的版本。
使用上方组件上传滑动图后,我们可以任意调整一屏显示的滑动图范围,如下所示:

1b22976395382f349cae0f1fb1a03b2c.gif

GIF.gif

以可添加超链接左滑为例,一起看下教程:

详细教程:
工具:iPaiban Pro 黑科技编辑器,网址:x.iPaiban.com

组件:双层滑动-前景左滑(不等尺寸图片、超链接)

编号:10377(组件)

第1步:选择组件
登录 iPaiban Pro 编辑器后,点击编辑器左侧「组件」按钮,在「滑动」分类中找到「双层滑动-前景左滑(不等尺寸图片、超链接)」组件,或者直接搜索组件编号10377,点击选择。


第2步:上传图片素材并添加链接
滑动图的宽度没有要求,但高度需保持一致。
底图尺寸需与第一屏显示的滑动图范围一致。比如下面5张图片分4屏显示,那么底图尺寸就是红框所示尺寸。

点击右侧「换图」按钮上传底图,点击「+」号批量上传滑动图。

接着在下面分别输入点击图片要跳转的链接即可。

第3步:调整滑动图显示宽度

容器宽度显示百分之几百,表示所有滑动图会显示几屏。
比如上传5张滑动图,容器宽度默认显示500,表示这5张滑动图将会显示5屏;调整为400,则表示这5张滑动图将会显示4屏;调整为200,则表示这5张滑动图将会显示2屏。

第4步:导入公众号后台

640.png

效果满意后接着点击「同步至微信后台」同步到自己的公众号就可以了。

局部导入可参考:《iPaiban Pro小助手v2.0安装和使用教程》




制作SVG交互图文认准 iPaiban Pro 黑科技编辑器,网址:x.iPaiban.com,复制网址在 PC 端 Chrome(谷歌)浏览器打开,即可开始注册并使用。


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



本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
转载请在文章开头和结尾显眼处标注:作者、出处和链接。不按规范转载侵权必究。
本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
未经授权严禁转载,授权事宜请联系作者本人,侵权必究。
本内容为作者独立观点,不代表数英立场。
本文禁止转载,侵权必究。
本文系数英原创,未经允许不得转载。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权,侵权必究。

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    DIGITALING
    登录后参与评论

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    800

    推荐评论

    暂无评论哦,快来评论一下吧!

    全部评论(0条)