卡牌、卡片式的设计，排版用这4种切换更有动感
在《双11必读案例清单.xls》中，给大家推荐了李佳琦Austin公众号经常使用的一个扑克牌切换效果。
其实针对原文中的那种卡牌、卡片式的设计，在 iPaiban Pro 黑科技编辑器中有很多非常适合的交互效果，最常见的就是这种扑克牌切换：
组件：自动-扑克牌切换(向左)
编号：10576（组件）
比较类似的还有洗牌切换：
组件：自动-洗牌切换(向左)
编号：10704（组件）
这两种都是自动轮播的效果，今天再给大家推荐两种点击触发并且适合卡片式设计的交互。
第1种，点击翻转切换图片，分为左右翻转和上下翻转：
组件：点击-左右翻转切换图片
编号：10197（组件）
组件：点击-上下翻转切换图片
编号：10198（组件）
第2种，点击图片从底至顶翻转切换，分为左、右、上、下4个方向：
组件：点击-图片从底至顶翻转切换(左、有触发区)
编号：11311（组件）
组件：点击-图片从底至顶翻转切换(右、有触发区)
编号：11312（组件）
组件：点击-图片从底至顶翻转切换(上、有触发区)
编号：11313（组件）
组件：点击-图片从底至顶翻转切换(下、有触发区)
编号：11314（组件）
以点击图片从底至顶翻转切换的交互为例，一起看下教程：
详细教程：
工具：iPaiban Pro 黑科技编辑器，网址：x.iPaiban.com
组件：点击-图片从底至顶翻转切换(左、有触发区)
编号：11311（组件）
第1步：选择组件
登录 iPaiban Pro 编辑器后，点击编辑器右侧「组件」按钮，在「点击」-「翻转切换」分类中找到「点击-图片从底至顶翻转切换(左、有触发区)」组件，或者直接在搜索框中搜索组件编号11311，点击选择。
第2步：上传图片素材
点击右侧3个「换图」按钮分别上传背景图、单击前图片和单击后图片。
3张图片尺寸需保持一致，为了更好的视觉呈现效果，单击前图片和单击后图片四周建议留出空白空间，以便露出背景图，如下所示：
第3步：设置触发区域和旋转效果
双击编辑区的图片，在弹出的窗口中红色色块表示触发区域，可任意调整位置和大小。
在右侧可以调整切换动画的时间：
点击页面最右侧「预览草稿」可随时预览效果。
第4步：导入公众号后台
效果满意后接着点击「同步至微信后台」同步到自己的公众号就可以了。
局部导入可参考：《iPaiban Pro小助手v2.0安装和使用教程》
制作SVG交互图文认准 iPaiban Pro 黑科技编辑器，网址：x.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可开始注册并使用。
新用户在「新手礼包」可领取3天企业标准版会员体验权，以及22个常用必备组件的大礼包（1年）。随礼包附赠千元优惠券，每单最高立降500元。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）