請輸入密碼，解鎖本文 2.0
6月7日，也就是高考第一天，老沙給大家分享了一個用 iPaiban Pro 黑科技編輯器簡單制作解鎖展開的方法，原文戳：《請輸入密碼，解鎖本文》
也可以直接在這里體驗：
這種解鎖展開其實是一種假·解鎖展開，它有一個最大的缺點是：直接點擊密碼的最后一位就會展開。
比如上面這個 Demo，我們不按照提示來，而是直接點擊數字「7」，就會展開。安慕希這篇《端午｜破譯羅云熙見面密碼》直接點擊右下角的按鍵也會展開。
▲來自「安慕希」公眾號
為了解決這個問題，iPaiban Pro 黑科技編輯器最新上線了一個專門用來制作解鎖展開的組合「解鎖展開(可設置點擊動畫&觸發區域)」，編號：10473
我們看下用它制作的一個 Demo：
它和開頭高考的 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) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）