繁榮！ 檢查網頁設計中的爆炸

有很多方法可以吸引觀眾的注意力。 我們被選擇寵壞了，儘管目前的技術狀態仍然不完美。 我們遇到了一些瀏覽器兼容性問題，並不是每台設備都能處理 Web 開發人員帶給我們的所有宏大解決方案。

儘管如此，以圖片為主要驅動力、以花哨過渡的滑塊為唯一香料的靜態網站的日子已經一去不復返了。 我們正在見證一個充滿大膽想法和盛宴的時代。

其中最重要的方面是開發人員不會將他們的注意力限制在大事情上。 是的，我們可以看到大量的畫布動畫、壓倒性的 VR 和需要全屏模式的視頻實驗等。然而，今天即使是最微小的細節也會受到關注。

網站上充斥著微觀解決方案，尤其是那些基於鼠標光標的解決方案。 我們可以偶然發現許多聰明的想法。 它們很棒，但在大多數情況下，它們是（我要找的詞是什麼？），“安靜”。 我不是在談論它們發出聲音，因為某些基於鼠標的解決方案實際上確實會發出聲音。 我說的是他們的行為。

他們的舉止流暢、平靜、溫和。 在某些情況下，它是如此無縫，以至於幾乎無法察覺。 而且，如果您對內容過於投入或有其他一些分散注意力的元素，您甚至可能會忽略它們。 那麼，為什麼不讓它們“響亮”一點，讓用戶不會錯過享受它們的機會呢？

如何做到這一點，你可能會問。 我有一個很好的解決方案：讓事情爆炸——字面上和比喻上。

Dean Wagman 的《太空中的粒子》

以 Dean Wagman 創建的這個奇妙的代碼片段為例。 雖然這是 Dean 進行的第一次帆布實驗，但它非常鼓舞人心。 你需要做的就是點擊屏幕上的任何地方，你會看到數百個明亮的小粒子爆炸，它們正飛到你的臉上。 儘管它沒有發出聲音，但它確實讓人感到喧鬧。

見筆
Dean Wagman (@deanwagman) 的《太空中的粒子》。

爆炸效果總是會喚醒一種感覺，即發生了一些響亮的事情。 那麼，為什麼不利用這個優勢，在不發出實際聲音的情況下添加一些噪音呢？ 更重要的是，我們在這裡有一系列精彩的代碼片段。 讓我們一起探索它們。

Aleksei 的粒子爆炸 / Christopher Lis 的 Kaboomerz

如果 Dean Wagman 的解決方案看起來有點過多，您可以隨時嘗試 Aleksei 的 Particle explode。 或者，相反，如果您需要產生更顯著的影響，您可以隨時採用 Christopher Lis 的 Kaboomerz。

第一個代碼片段具有迪恩爆炸的“小兄弟”版本，其中數十個微小粒子形成一個小爆炸，迅速出現並消失。 以克里斯托弗·利斯為例，您會對粒子的大小感到驚訝。 從鼠標光標中出現的五彩紙屑非常巨大。 然而，由於它們的壽命很短，整體效果並不是壓倒性的。 這只是令人愉快的。

見筆
Aleksei (@alek) 的粒子爆炸 JS/CSS3。

見筆
#Codevember 5 – 克里斯托弗·利斯 (@chriscourses) 的 Kaboomerz。

DOM 爆炸由 David A.

如果您喜歡這個想法，但需要更多類似數字和復古風格的東西，那麼大衛創造了一個驚人的解決方案。 他使用各種大小的矩形而不是圓形來實現可愛的 8 位觸摸。 因此，我們可以見證 80 年代魅力的小規模爆炸。

見筆
David A. (@meodai) 的 DOM 爆炸。

CreateJS 的 WebGL 閃耀

如果您尋求真實的版本，CreateJS 的 WebGL Sparkles 是一個值得考慮的完美示例。 儘管這裡的所有粒子都是白色的，但由於經過深思熟慮的行為，當您單擊屏幕時，它看起來就像真正的慶祝槍聲。 更重要的是，光標有一條可愛的軌跡，給場景帶來了一絲魔力。

見筆
CreateJS：由 CreateJS (@createjs) 製作的 WebGL Sparkles。

Christopher Lis 的自動煙花發射器

說到這一點，如果沒有一劑煙火的瘋狂，我們的爆炸集合將是不完整的。 Christopher Lis 的 Automatic Firework Launcher 是一個值得考慮的好例子。 這是一個卡通煙花發射器。 由於五顏六色的顆粒和康乃馨般的形狀，它讓我們想起了照亮星空的真正煙花。

見筆
第 29 天 - Christopher Lis (@chriscourses) 的自動煙花發射器。

LegoMushroom 的模態窗口破壞概念

畫布實驗並不是我們列表中唯一的實驗。 爆炸效果可以應用於界面的各種元素，例如模態窗口。 LegoMushroom 生動地證明了這一點。 看看他們的模態窗口概念。 當您關閉窗口時，它不僅會消失，還會分成幾部分。 它是當今非常流行的所有精美的全插圖網站的完美補充。

見筆
LegoMushroom (@sol0mka) 的模態窗口破壞概念。

Sylvain Garnot 的 SCSS 爆炸效果 / Kacper Bawol 的 SVG 文本爆炸 / Tim Horwood 的 Canvas 文本爆炸

爆炸效果也有利於排版。 考慮 Sylvain Garnot 的 SCSS 爆炸效果、Kacper Bawol 的 SVG 文本爆炸和 Tim Horwood 的 Canvas 文本爆炸。

這三個都展示了應用於文本的爆炸效果。 可以預見的是，鼠標光標會觸發每一個。

Sylvain Garnot 讓用戶將每個字母炸成一百個小方塊。 Kacper Bawol 的概念看起來幾乎相同，但這次符號分解為小三角形。 而且，Tim Horwood 允許用戶將整個文本分解成微小的粒子，這些粒子最終會返回並將所有內容恢復到原始狀態。 這三個想法都令人難以置信。

見筆
SCSS – sylvain garnot (@sylvaingarnot) 的爆炸效果。

見筆
Kacper Bawol (@Casperovic) 的 Svg 文本爆炸。

見筆
畫布文字爆炸，點擊查看 Tim Horwood (@tdhorwood)。

Ko.Yelie的房子爆炸

爆炸效果也可以應用於圖像。 Ko.Yelie 的這個概念就是一個很好的例子。 通過單擊圖片，您可以將其炸成小塊。 儘管在現實生活中的界面中很難找到適用於此的應用程序，但觸手可及的一些非凡的解決方案總是很棒，可以讓常見的事物看起來獨一無二。

見筆
Ko.Yelie (@ko-yelie) 的房屋爆炸。

一個爆炸性的功能

爆炸效果是一個有爭議的工具。 由於其“爆炸性”性質和強大的魅力，它並不適合所有的界面。 儘管與鼠標光標一起使用時看起來無害甚至中性，但它非常“響亮” - 所以你需要小心。

請記住，並非所有人都從網站上尋求娛樂。 並不是每個人都喜歡奢華的表演和壓倒性的印象。 歸根結底，內容始終為王。

但是，如果您正在尋找一些不尋常的方式來製作有趣且可以說“響亮”的令人興奮的用戶交互，那麼爆炸效果無疑會派上用場。