请输入密码,解锁本文 2.0

举报 2022-04-12

6月7日,也就是高考第一天,老沙给大家分享了一个用 iPaiban Pro 黑科技编辑器简单制作解锁展开的方法,原文戳:《请输入密码,解锁本文》

也可以直接在这里体验:

1.gif

这种解锁展开其实是一种假·解锁展开,它有一个最大的缺点是:直接点击密码的最后一位就会展开。

比如上面这个 Demo,我们不按照提示来,而是直接点击数字「7」,就会展开。安慕希这篇《端午|破译罗云熙见面密码》直接点击右下角的按键也会展开。

▲来自「安慕希」公众号

为了解决这个问题,iPaiban Pro 黑科技编辑器最新上线了一个专门用来制作解锁展开的组合「解锁展开(可设置点击动画&触发区域)」,编号:10473

我们看下用它制作的一个 Demo:

2.gif

它和开头高考的 Demo 有3个不同之处,一是按键触发闪烁反馈;二是必须按照顺序点击密码才能解锁;三是解锁成功后,展开方式为图片消失展开,而不是直接展开

尤其是第二点的优化,可以说是真·解锁展开,MAC魅可一文《年中盛典| M·A·C 618限时礼遇惊喜空降》便是使用了这种效果。

下面我们看下是怎么做的。

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

组合:解锁展开(可设置点击动画&触发区域)

编号:10473(组合)

第1步:选择组合

登录 iPaiban Pro 编辑器后,点击编辑器左侧「组合」按钮,在「花样展开」分类中找到「解锁展开(可设置点击动画&触发区域)」组合,点击选择。

第2步:进入组合编辑模式

如下所示,点击「点击此处配置」,进入组合编辑模式。

在组合编辑模式中,我们需要分别设置展开前展开后的内容。

第3步:设置展开前内容

点击展开前区域,在页面右侧上传准备好的密码图片。

这是本文 Demo 的展开前素材图,一共3张,所有图片尺寸保持一致。

这里是重点。上传后双击图片,调出可调整点击触发区域的窗口。窗口中红框区域即代表触发区域,我们拖动红框到大概位置,然后调整红框大小精确定位。

接着点击「下一张」,继续调整下一张图片的触发区域,直到设置完所有图片的触发区域后,点击关闭该窗口。

第4步:设置展开后内容

想要设置展开后内容,我们首先要确认展开后的内容有哪些交互效果,会用到哪些交互组件,然后在左侧依次拖动相应组件到展开后区域组件位中。

本文Demo只用到了一个无缝图,只需拖动一个「无缝图(不可弹出)」组件到组件位中,然后上传图片即可。

第5步:设置效果参数

点击右侧红色小三角符号,可分别设置图片切换时长展开时长

我们还可以设置按键触发闪烁的颜色,不填时默认白色。

展开高度一般无需调整,但当大家在手机上预览时,如果发现展开后有多余的空白或者没有展现出全部内容,这时候可以通过调整展开高度使其恰好展开。

第6步:预览效果并导入公众号后台

内容编辑完毕后,我们点击左上角「保存并退出」编辑模式来到首页。

点击首页右侧「预览草稿」可预览效果,预览满意后,便可以点击「导入微信后台」了。

导入时使用 iPaiban Pro 小助手更方便哦,最新版本的小助手已经支持局部导入,安装和使用教程见:《iPaiban Pro 浏览器插件来了!》

如果不想要闪烁触发反馈的话,可以选用「连续点击切换图片+消失展开(可设置触发区域)」组合,编号:10469,制作方法是一样的。



618返场来了!



①组件买一赠一(购买任意组件均可免费获得同级别组件一个),会员赠送2-3月;

②所有购买标准版会员,以及购买组件的用户,均可领取3天高级版会员试用,460多种组件任意使用。

标准版:1998一年,可使用150+模板,一个账号,不限量,也不限公众号,可免费参加线下活动;

高级版:19800一年,可以使用现在400+模板,今年会更新到800个以上,5个账号,不限量,也不限公众号。还有线下活动免费参加、免费上万案例库等福利。

应大家需求,以上两个活动均延续一周至6月25日结束。购买后凭付款截图领取赠送组件,以及领取高级版会员试用的用户,请添加下方白骨精微信领取。

▲长按扫码识别

认准编辑器网址x.iPaiban.com,复制网址在 PC 端 Chrome(谷歌)浏览器打开,即可注册并使用。

●黑科技交互排版样式????????如果有感兴趣的企业或品牌需要定制黑科技排版,请添加玉兔微信沟通。


点个“在看”戳沙小僧(playhudong033)抱走《新媒体必备资源工具大礼包》

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

    评论

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

    评论

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

    推荐评论

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

    全部评论(0条)