寶藏模版

各位?E2.COOL?的會員，你們是否知道這些酷炫的花式排版概念，都是以編輯器中「等分容器滑動」組件為基礎實現(xiàn)的？如果你很少使用該組件，那么一定要收藏好本期教程，它將讓你的 CSS + SVG 圖文排版技術產(chǎn)生質(zhì)的飛躍！

認識「等分容器滑動」

和「無限圖片滑動」相似的，它們首先都旨在實現(xiàn)橫向視覺結構的滑動。但容器之所以謂之容器，在于每個滑塊可以嵌套不同的內(nèi)容結構。

比如一個非常基礎的編輯器操作問題：如何在滑動中加入超鏈接/小程序？答案正是使用「等分容器滑動」，隨后在嵌套區(qū)加入你需要的滑動類型。

同理，嵌套區(qū)還可以加入其它 SVG 交互動畫效果，使得每一個滑塊都具備各自不同的獨立交互特性。比如我們將基礎的「點擊漸現(xiàn)」嵌入：

而這只是「等分容器滑動」組件基礎的使用方法，接下來我們要為運營人們介紹幾種基于?E2.COOL?黑科技 SVG 編輯器的妙用策略，實現(xiàn)一系列讓用戶大開眼界的排版特效。

錯層滑動

非?？犰诺牟季中Ч?，圖層數(shù)可以多達 4 層！我們在《解析｜「錯層滑動」是什么高端操作？》為大家具體解釋過它的制作方法，并在《1分28秒完成OPPO公眾號排版特效（錯層滑動）》演示了復盤過程。

雙向滑動

滑動可以支持既向左也向右滑動嗎？只要把「等分容器滑動」套入「等分容器滑動」就可以了！

我們在《「雙向滑動」是什么神奇圖文排版？》就介紹了它在編輯器內(nèi)的搭建方法，具體案例參考可以點擊《Power Story | 點擊攻略，開啟2022 Easy模式》一文。

全文滑動

如果你的行文邏輯是雙產(chǎn)品線發(fā)售、前后對比等，那么這時候可以通過「等分容器滑動」組件完成全文滑動效果。

更多相關案例包括：

《快，兩款新 iPhone 能預購了?！?/span>

《Livox 同發(fā)布覓道 Mid-70及傲覽 Avia兩款激光雷達》

《香菜？新地！它來啦！》

變色滑動

結合?E2.COOL?黑科技 SVG 編輯器的「濾鏡特效」類組件，小 E 再來為大家介紹一種奇特的變色滑動效果，原文可閱讀《在？給春天上個色！》。

搭建方法很簡單。先用「零高圖片」形成背景圖，隨后在「等分容器滑動」中第一個嵌套區(qū)放入「灰度化」組件，第二個嵌套區(qū)空著不放任何內(nèi)容即可。

注意，「灰度化」組件位于「黑白畫面」組件的篩選器中！另外如果你想使用點擊觸發(fā)式的上色特效可以考慮閱讀《黑科技編輯器｜掃描上色教程》。

滑動進場

既然提到了「空著不放任何內(nèi)容」，那么基于同樣的策略我們還可以做出一種「滑動進場」的效果，原文可閱讀《喜茶x藤原浩｜喜茶被黑了？》。

以上這個案例中，就是「等分容器滑動」內(nèi)第一個嵌套區(qū)不放任何內(nèi)容產(chǎn)生的結果。

伸長組滑動

如果我們將「伸長動畫」套入「等分容器滑動」可能發(fā)生什么？不妨點擊《??9 ROOM?? 帶你逃離當下》，觀察其閱讀流程中后期出現(xiàn)的「伸長組滑動」效果。

當然，原文需要大量的手工代碼結構開發(fā)。如果基于編輯器，那么目前僅支持將「點擊-伸長」嵌套入「等分容器滑動」中，且應在篩選器中選擇「點擊-伸長（切片等寬版）」，所有素材切片寬度務必一致。

除此以外

E2.COOL?黑科技 SVG 編輯器的「無極嵌套」能力，使得「等分容器滑動」的創(chuàng)作具備海量的可行性。最后小 E 留給你一個思考題，是一篇由我們平臺基于「等分容器滑動」魔改完成的高級定制《如何打造一款Tiffany Knot？》，請分析其實現(xiàn)原理：

同原理排版的圖文還包括《內(nèi)附彩蛋｜周年慶充值優(yōu)惠一覽》可供各位運營人參考學習。

E2.COOL

高級交互定制服務

這里是黑科技編輯器（e2.cool），會的比別人多一點