網頁設計中粒子動畫的 10 個漂亮例子

幾年前，粒子動畫席捲了網絡，並成功地為自己開闢了一個利基市場。 當前對具有高科技氛圍和幾何裝飾的設計的巨大癡迷使它們成為當今更受歡迎的解決方案之一。

通常，粒子動畫可以在英雄部分看到，例如在 JetUp Digital 中。

如您所見，這是一種優雅的方式，可以為第一印象添加某種趣味，同時巧妙地、不顯眼地將網站與人群分開。

要重現這種效果，您的第一步應該是particles.js。

它是 Vincent Garreau 的輕量級插件，是大多數粒子動畫的核心和靈魂。 更重要的是，在其原始狀態下，它是網絡上複製最多的解決方案之一——儘管可能不像作者的例子那樣具有如此高的強度。

通常，開發人員更喜歡更整潔、謙虛和冷靜的變體。 例如，查看 Romswell Roswell Parian Paucar 的 Canvas Particles。 它是粒子和視差的組合，產生了一種引人入勝的動態美感。

然而，這並不意味著該方法僅限於這種實現。 考慮一下 Dean Wagman 的 Particles in space、Robin Selmer 的 CSS only 粒子系統，當然還有 Alex Safayan 的代碼筆中巧妙地再現和特色的推開效果。 雖然 Robin Selmer 的概念只是一個令人愉悅的作品； 另外兩個需要用戶的交互，這總是令人興奮的。

使用粒子動畫給人留下深刻印象

隨著時間的推移，技術成熟了。 從散落在畫布上的雜亂無章的小白點，它變成了一種潛力巨大的工具。 這不是什麼特別的東西，但它有一定的令人驚嘆的因素。 此外，它完美地為高科技、幾何和商務美學做出了貢獻——自然而然地完成了它們。

前提是：粒子動畫要給人留下深刻印象。 而且，開發人員始終堅持這一假設，充分利用它。 讓我們考慮一下這個解決方案的真正粉絲創建的一些驚人的代碼片段。

Justin Windle 的 30,000 個粒子

這裡的標題不言自明。 船上有 30,000 個粒子，您會期待一些宏偉的東西。 賈斯汀溫德爾當然達到了我們的期望。 他的概念令人難以置信。 用你的鼠標到處玩。 物理學只是例外。 這個版本的粒子動畫在開發者中很受歡迎，儘管規模沒有那麼大。

Alex Safayan 在水中的魚

Alex Safayan 提出了幾乎相同的解決方案，但在這種情況下，粒子越來越大。 鼠標光標也將這些點推開，形成帶有微妙漣漪效果的痕跡。 動畫的行為讓人想起魚靠近水面時的運動。 注意物理學：點之間的相互作用是經過深思熟慮的。

浮游生物——Marco Dell'Anna 的粒子生命

獲得 2017 年度最受關注項目獎的 Plankton 無疑是值得關注的。 該項目不僅著迷於想法，還著迷於實現。 從像手套一樣適合這裡的微妙色彩到看起來令人難以置信的自然的華麗行為，Marco Dell'Anna 對細節有著敏銳的洞察力。

Marco Dell'Anna的星塵

我喜歡這里華麗的複古氛圍、霓虹燈和華麗的色彩。 很難把你的眼睛從它身上移開。 Stardust 是設計和編碼的共生體，是一部鼓舞人心的傑作。

Akimitsu Hamamuro 的重力點

Akimitsu Hamamuro 邀請您在他的遊樂場添加所謂的“重力點”。 它們侵入點的混亂運動，像磁鐵一樣拉動它們。 雖然它們不扮演軌道中心的角色； 然而，它們形成了迫使粒子向其方向移動的焦點。

Nate Wiley 的 Particle Orb CSS

如今，球體是英雄區域非常流行的風格選擇。 Nate Willey 對這一趨勢的看法令人印象深刻。 由於微小的顆粒，球體看起來很脆弱，同時由於經過深思熟慮的行為而堅固。 他分解和重新形成球體的程序非常棒。

Kevin Rajaram 的粒子波

Kevin Rajarm 汲取了粒子動畫的美麗和優雅，並用 Three.js 的強大功能對其進行了增強，帶來了一個精緻但真正複雜的概念。 令人驚嘆的海浪景色讓人感覺未來主義、人工和迷人。

非正統用途

還有更令人印象深刻的使用粒子動畫的方法。 讓我們走出常規，開箱即用地思考：這種方法很容易使標識和字母等元素受益。

Tamino Martinius 的交互式粒子標誌

Interactive Particle Logo 就是一個典型的例子。 它看起來像是上面提到的 Justin Windle 片段的重新設想的解決方案。 雖然沒有 30,000 個點，但它由數量驚人的粒子組成，巧妙地組成了“CODEPEN”這個詞。 這是該概念找到實際用途的案例之一。

Louis Hoebregts 的文本到粒子

Louis Hoebregts 在這支筆中提供了先前解決方案的彩色版本。 這裡的文本是由一千個彩色實心圓圈組成的，這些圓圈通過與上一個示例相同的交互性來豐富。

粒子由 Marco Dell'Anna 書寫文本

雖然這不是一個戲劇性的入口，但它有一些令人著迷的東西。 流暢的動畫慢慢揭開人物的面紗，點燃我們的興趣。 這個概念具有類似於“陌生人事物”介紹的某種神秘風格。

馬可·戴爾安娜 (Marco Dell'Anna) 就這樣做

這是Marco Dell'Anna的又一傑作。 這一次，粒子動畫參與塑造了著名的耐克標誌。 從晦澀、半透明到明快、立體，動畫逐漸暴露了標誌，不顯眼地抓住了整體的注意力。

enrico toniato 的 404 粒子文本

如果您認為粒子動畫的唯一實際用途是豐富英雄部分，那麼 Enrico Toniato 將證明您錯了。 他對錯誤頁面的看法非常出色。 遵循他的想法並使用運動中的粒子來拯救 404 頁面，使其不再顯得無聊和令人反感。

引人注目的效果

粒子動畫是越小越好的情況之一。 點越小，可以實現的效果就越令人印象深刻。 一方面，由於涉及幾何和物理，它看起來很複雜。 另一方面，由於精緻的形狀，它看起來脆弱而微妙。 這種獨特的融合使粒子動畫與眾不同且引人注目。