三种方法在公众号中实现图片左右滑动效果:详细教程

本文提供了一份详尽的教程,教你如何在公众号文章中实现图片的左右滑动效果,包括使用滑动样式、滑动布局和SVG滑动组件的步骤,让你的内容更具吸引力。

在公众号运营中,图片的展示方式对于吸引读者的注意力至关重要。其中,左右滑动图片效果因其互动性和视觉吸引力而备受欢迎。本文将详细介绍如何在公众号中实现这一效果,让你的内容更加生动有趣。

一、滑动样式—有样式的滑动

1.1 寻找滑动样式

首先,打开你的135编辑器。在编辑器页面左侧,找到[样式]选项。在顶部的SVG分类中,选择[滑动],这里汇集了各种滑动样式供你选择。

1.2 更换图片

以样式120420为例,如果你需要更换图片,可以按照以下步骤操作:

单击需要替换的图片。

在图片编辑选项中选择[换图]。

注意,为了保持滑动效果的一致性,新图片的尺寸应与原图一致。你可能需要对新图片进行裁剪以符合原尺寸。

1.3 编辑SVG动画

如果你需要更精细的控制,可以选择[编辑SVG动画]。在编辑页面中,根据素材大小更换图片,并进行相应的调整。

1.4 增删图片

若要增加或减少滑动中的图片数量,同样以样式120420为例:

单击滑动样式,在全局样式中选择[加一个]来增加图片。

如果需要减少图片,点击[减一个]即可。

二、滑动布局—最纯粹的滑动

2.1 创建滑动布局

在编辑器左侧顶部,找到[布局]—[基础布局]—[滑动布局]。点击[滑动布局]到编辑器页面。

2.2 设置滑动参数

在滑动布局中,你可以设置滑动方向(竖向或横向)、背景、宽度等内容。

2.3 上传并编辑图片

添加三块滑动布局。

双击每块滑动布局,进入编辑页面后上传图片。确保所有滑动素材的宽高一致。

图片之间没有空隙会显得很紧凑,可以给图片添加边距。

三、SVG滑动组件—最会玩的滑动

3.1 使用SVG编辑器

如果你需要更复杂的滑动效果,如添加超链接、小程序等,可以通过135编辑器左侧的SVG编辑器实现。

进入SVG编辑器页面,在[互动效果]中选择[滑动]。

3.2 预览效果

将鼠标放在组件上,右侧会出现效果GIF图展示,让你直观地看到最终效果。

通过上述步骤,你可以轻松地在公众号中实现图片的左右滑动效果,提升用户的阅读体验。现在,就动手试试吧!

文章申明:本文章转载自互联网公开渠道,如有侵权请联系我们删除
文章评价
登录后可以评论
立即登录
分享到