想要对比展示？8种对比类排版效果来了！
产品1与产品2的对比，功能1与功能2的对比，白天与黑夜的对比，之前与现在的对比……
当我们想要对比展示，在SVG交互的奇妙世界里，有各种各样的效果能助你展示内容，增强互动性与趣味性。
今天，就为大家一次性盘点8种超有意思的对比类效果。
每一种效果都独具魅力，效果下方附有对应的组件和教程。
一
自动-左右横向擦除切换(带移动图标)
*素材来自西北工业大学《86岁生日快乐！100图看西工大的历史巨变！》
组件：自动-左右横向擦除切换(带移动图标)
编号：10866（组件）
两张图片不断地来回擦除切换，在擦除的位置可自定义上传图标，让自动切换更具对比感，非常适合同样地点不同场景的对比。
二
双层前景左滑(自动对齐)
*素材来自微信派《你是微信E人还是I人？》
组件：双层前景左滑(自动对齐)
编号：10270（组件）
双层前景滑动其实一种非常常见的排版效果，如果我们按照如上设计，那么用作对比也是相当合适。
三
双向滑动
*素材来自施耐德电气《Power Story | 点击攻略，开启2022 Easy模式》
组合：左滑组合(自动对齐)
编号：10249（组合）
组件：单层滑动-右滑(自动对齐)
编号：10240（组件）
在初始图片上既可以向左滑也可以向右滑，双向滑动作为一种新颖且高效的对比展示方式，可有效吸引读者参与互动。
四
长屏左滑
*素材来自星巴克中国《一年一度樱花上新| 美好收录完毕，请查收》
组合：长屏左滑组合(自动对齐)
编号：10868（组合）
教程：《Apple、Burberry 的长长长长长长长屏滑动，教程来了！》
长屏左滑可以让整篇文章能都滑动查看，在展示日夜或者两面对比的时候非常实用，给读者一文似两文的感受。
五
两列触发全屏左滑
*素材来自Apple《缤纷派，超能派，有请 2 款新 iPad。》
组件：Apple同款-两列触发全屏左滑(有返回触发区)
编号：11340（组件）
教程：《两列触发全屏左滑，Apple这个丝滑效果用编辑器就能做啦！》
想在一篇图文里巧妙展示双产品或双功能，还不占空间？Apple同款两列触发全屏左滑值得一试，效果相当丝滑。
六
无限选择切换(两组)
*素材来自DR珠宝《DR最新情侣礼盒，520官宣必备！》
组件：无限选择切换图片(两组)
编号：11274
点不同图标，下方图片随心切换，无限点击超有趣！这种效果不仅互动感拉满，还能节省图文空间，轻松突出产品多面特色。
七
点击弹性展开(两组)
*素材来自MCM中国《TA的答案是？》
组合：点击弹性展开(两组)
编号：11157
点击弹性选择展开，是一种在屏幕同一行可以点击选择、展开效果略带Q弹感的展开，非常适合答题创意或介绍多个产品时使用。
八
点击全文切换
*素材来自法拉利中国《开启驾趣·新玩「法」》
组合：点击-循环切换(两组)
编号：11908
教程：《◑◑◑◑◑◑◑◑◑》
一篇图文两种模式，点击按钮，白天黑夜随心切换还能循环，切换内容含多样交互。不仅昼夜可用，季节、冷热对比等场景也超适配。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）