在图文里也能刷视频、刷电梯!?

原创 收藏 评论
举报 2023-03-02

前几天发了一篇《在图文里也能拍照!?》的文章,有小伙伴跟小编感叹:

「很早就知道这个组件,没想到还能这样玩。」

其实,模拟拍照的那个组件效果非常简单。好的交互图文都是这样,不是效果多么酷炫,而是交互、设计和内容的创意结合得好,即便是很简单的交互,有时候也能创造出有趣的效果。

在图文里会「拍照」了,今天咱们再试试「刷视频」,向上轻滑图片:

1677739746124.gif

添加图片注释,不超过 140 字(可选)

有人可能想到了之前提过的上滑开车效果:

1677739893301.gif

添加图片注释,不超过 140 字(可选)

组件:三层滑动-上滑(多张) 编号:10803(组件) 教程:《七夕「开车」,东风标致的这篇浪漫之旅图文是怎么做的?》

但刷视频效果和开车有很大不同,前者有一个停顿的过程,它是由一个会自动对齐的上滑图片组件,然后覆盖一层遮罩制作成的。

会自动对齐的上滑图片组件并不是一个热门组件,但却可以被有的品牌用得非常有意思,比如恒生银行的电梯创意:

1677739932427.gif

添加图片注释,不超过 140 字(可选)

对于这个会自动对齐的上滑图片组件,你还能想到什么创意玩法?

留言区聊一聊,老沙将会给所有说出新创意的小伙伴各送SVG案例库会员一个月,70000+案例随便搜。

不明白「刷视频」效果是如何实现的,戳:

i排版黑科技

详细教程:

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

组件:单层滑动-上滑(自动对齐、支持多张)

编号:10269(组件)

第1步:选择组件

登录 iPaiban Pro 编辑器后,在「组件」-「滑动」分类中找到「单层滑动-上滑(自动对齐、支持多张)」组件,或者直接搜索组件编号10269,点击选择。

v2-f31b9c70f608ed3c316ae78dfec7664a_720w.png

添加图片注释,不超过 140 字(可选)

第2步:上传图片素材

准备好要滑动的图片,然后点击右侧「+」号即可上传。所有滑动图片的尺寸需保持一致。

v2-c3a7a78de6bea022078dd20d65cc871f_720w.png

添加图片注释,不超过 140 字(可选)

第3步:设置遮罩图片

在「特殊」分类中找到「遮罩」组件,点击选择,然后上传图片。注意该图片应与滑动图片的尺寸保持一致。

v2-b3b2c63c6f6aac8ffdc452cf40a2b259_720w.png

添加图片注释,不超过 140 字(可选)

第4步:导入公众号后台

点击页面最右侧「预览草稿」可预览效果,效果满意后继续点击「导入微信后台」就能开始导到公众号了。

导入公众号.png

添加图片注释,不超过 140 字(可选)

导入时使用 iPaiban Pro 小助手更方便哦,最新v2.0版本的小助手还支持一键打包下载图文图片素材,非常方便,安装教程戳:《iPaiban Pro小助手v2.0来啦!》

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


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

    评论

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

    评论

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

    推荐评论

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

    全部评论(0条)