公众号沉浸式阅读排版怎么做?
这样的效果利用SVG组件也能复刻,它主要利用了多次点击换图展开SVG+点击换图SVG相结合完成了这一篇的交互效果。虽然都是我们常见的SVG,但这篇文章的创意却是值得我们好好学习的地方。
gif图展示
点击绿色文字跳转阅读
本篇文章围绕再生农业计划展开,分别讲解了雀巢在再生农业方面的实施情况,从农林业、土地恢复、绿色边缘等角度具体叙述。整体设计以扁平画风格为主,通过横屏排版的方式来展示文章的主要内容,让原本看似枯燥的内容以这种动画的形式展示,增强了文章的可读性,让用户能保持耐心继续阅读。
在这篇文章的排版设计上看,文章整体设计精致,可能很多人会觉得只有靠定制才能实现,其实这篇文章利用SVG组件也能复刻,它主要利用了多次点击换图展开SVG+点击换图SVG相结合完成了这一篇的交互效果。虽然都是我们常见的SVG,但这篇文章的创意却是值得我们好好学习的地方。
大家通常在文章中对于点击换图SVG的使用都是比较分散的,只是作为文章的一个版块,与其他内容的衔接性不强,而这篇文章中,却将简单的点击换图SVG融入到横版的长图设计中,并与多次点击换图展开SVG结合,形成完整的推文效果,带着用户沉浸式的浏览阅读。所以我们在以后的创意中也要养成整体思维。
在135编辑器首页,选择左侧菜单栏【SVG编辑器】进入。
进入网页后,选择【互动效果】—素材中找到多次点击换图展开SVG,ID:112,点击换图SVG,ID:4,详细制作教程如下:
多次点击换图展开教程:点击查看
点击换图SVG使用教程:点击查看
文章申明:本文章转载自互联网公开渠道,如有侵权请联系我们删除
登录后可以评论
立即登录
立即登录
热门工具
135编辑器
领先的在线图文编辑平台原创样式素材,一键套用
笔格设计
受欢迎的在线作图网站,新媒体配图、手机海报应有尽有
笔格PPT
输入主题,AI一键生成PPT;上传本地文件秒变PPT
管小助
企业营销、私域流量运营——站式营销管理平台