縱享絲滑,寶馬這種圖片自動消失展開是怎么做的?
打開圖文后,自動展開全部圖文內容。
這種「自動展開」的效果相信大家已經很熟悉了。
*素材來自蔚來《這份力量感,放大看看?》
組合:自動展開
編號:10863(組合)
大家注意到了嗎?大部分的自動展開效果,就像上方蔚來的這個案例,打開圖文后初始的內容不變,自動展開其余的部分。
那么要是想讓打開圖文后初始的內容自動消失,接著首屏出現帶有交互或者圖片尺寸不一樣的內容并自動展開圖文,應該怎么辦呢?
今天我們就給大家介紹一個自動展開的升級效果——自動消失+展開。
一起來看一下寶馬中國的這篇案例:
*素材來自寶馬中國《準備!揮出你的五月第一桿》
組合:自動消失+展開
編號:11887(組合)
展開前是運動員揮動球桿的GIF動圖,隨后出現了以動圖為背景,文字提示「上滑,燃情揮桿」的雙層前景上滑圖,并展開全文。
看似GIF沒變,其實最開始的GIF播放后消失了才出現的后面的上滑效果,內容過渡得十分絲滑流暢。
這種效果使用 iPaiban Pro 黑科技編輯器里的「自動消失+展開」組合(編號:11887)即可實現。
「自動消失+展開」的效果非常適合新產品、新玩法介紹類的文章,從舊有的內容引入,讓原本占據視野的舊內容自動消失,緊接著全新的、更有吸引力的信息自動展開,讓新的亮點得到淋漓盡致的體現。
以寶馬中國的文章為例,一起來看看這個效果是如何制作的吧。
詳細教程:
工具:iPaiban Pro 黑科技編輯器,網址:SVG.iPaiban.com
組合:自動消失+展開
編號:11887(組合)
第1步:選擇組合
登錄 iPaiban Pro 編輯器后,點擊編輯器右側「組合」按鈕,在「花樣展開」分類中找到「自動消失+展開」組合,或者直接在搜索框中搜索組合編號11887,點擊選擇。
第2步:進入組合編輯模式
點擊「編輯組合」,進入組合編輯模式。
在組合編輯模式中,分為展開前和展開后兩塊設置區域。
第3步:設置「展開前」內容
點擊「展開前」區域,在右側點擊「換圖」按鈕,上傳展開前的初始圖片。
第4步:設置「展開后」內容
「展開后」的內容支持嵌套各種組件,需要什么效果就在左側「組件」分類中找到相應的組件拖動到組件位中,然后上傳需要的素材即可。
添加組件位-拖動組件到組件位中-上傳圖片,每需要一個樣式就按照這3步操作:
第5步:設置參數
點擊右側紅色小三角,可以設置初始等待時長、切換時長和展開時長。
「初始等待時長」是指用戶打開圖文后展開前內容顯示的時間。一般是GIF的播放時間。
「切換時長」指展開前的圖片和展開后的圖片切換時間。
「展開時長」即圖文全部展開花費的時長。
如果預覽效果發現內容沒有完全展開或者展開過長,可以通過「加減展開高度」進行調整,輸入負數減小展開高度。
第6步:導入公眾號后臺
內容編輯完畢后,點擊左上角「保存并退出」逐步退出組合編輯模式回到編輯器主頁面。
繼續點擊最右側「預覽草稿」,效果滿意后接著點擊「同步至微信后臺」就可以了。
使用同步功能無需頻繁在編輯器和微信后臺切換,同步成功后可以立即掃描二維碼查看。
轉載請在文章開頭和結尾顯眼處標注:作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載,授權事宜請聯系作者本人,侵權必究。
本文禁止轉載,侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權,侵權必究。
評論
評論
推薦評論
暫無評論哦,快來評論一下吧!
全部評論(0條)