網頁設計中基於 Blob 的動畫背景的攻擊

已發表: 2020-10-26

動畫背景是現代網站的一個流行功能。它不再是一種趨勢或非同尋常的東西。這只是當今裝飾英雄區域的可行方法之一。儘管瀏覽器兼容性仍然存在問題，但該解決方案已經成功地為自己開闢了一個利基市場。

有不同種類的動畫。你可以偶然發現：

粒子動畫；
萬花筒動畫；
抽象的 3D 動畫；
平滑的幾何動畫等等。

幾年前，受星座啟發的粒子動畫佔據主導地位，而如今，斑點狀動畫激發了創意團隊的頭腦。你能做什麼？液體行為是不可抗拒的。顯示大水滴如何在空間中平穩移動的變形例程很容易贏得在線觀眾的青睞，並使您的網站處於領先地位。

為了從這種主流技術中受益，我們為您提供了一系列出色的代碼片段，它們將為您提供有關如何構建自己的 blob 形動畫的提示。您可以使用傳統的或全新的工具來做到這一點。現在，讓我們為您的下一個項目找到完美的匹配。

Uwe Chardon 的 Blob 動畫

Uwe Chardon 對這一流行解決方案的看法既實用又鼓舞人心。它具有簡單、扁平的斑點，具有美麗的橙色和光滑的邊緣，放置在乾淨的環境中。他設法很好地模仿了液體的行為。

結果是簡單的形狀和復雜的行為的成功組合，看起來非常令人印象深刻。

查看 Uwe Chardon 的 Pen Blob 動畫純 CSS

阿什頓·霍爾蓋特 (Ashton Holgate) 的 Blob

前面的示例描述了一種具有不規則形狀和相對富有表現力的變形的傳統斑點。然而，阿什頓霍爾蓋特的這個項目堅持了一個更神聖的形狀，幾乎與圓形接壤，變化幾乎不明顯。儘管如此，它看起來也很出色。

更重要的是，藝術家還玩弄了文字，當它碰到氣泡的區域時，迫使它把顏色變成相反的顏色。

查看 Ashton Holgate 的 Pen Blob

Fabio Ottaviani 的彈跳液體裝載機

Fabio Ottaviani 已將 Blob 動畫固有的粘性行為的俏皮性付諸實踐。他的泡泡很小，但它的可愛變形和有趣的彈跳產生了相當大的影響。

雖然鋼筆項目的銘牌上寫著“Loader”，但它可以很容易地變成背景的裝飾細節。要做到這一點，你只需要知道 HTML 和 CSS，因為藝術家根本不使用任何 JavaScript 魔法。聰明的。

參見 Fabio Ottaviani 的 Pen Bouncing Liquid Loader

Shaw 的畫布斑點測試

與前面的示例不同，此 drop 完全由 JavaScript 生成。因此，準備好深入了解令人興奮的解決方案並使用圖形進行複雜的遊戲。更重要的是，這個概念與其他概念的不同之處在於它的原始外觀，以及相當流暢和平靜的行為，帶來整體寧靜的氛圍。

它非常普遍和中立。因此，它可以成為眾多項目的完美背景動畫。

請參閱 Shaw 的 Pen Canvas Blob 測試

杰弗裡的斑點

Jeffrey 的這個解決方案是兩種趨勢的成功結合。在這裡，您可以找到近來非常流行的參差不齊的背景以及優於其他選項的流動性行為。

代碼片段由 HTML、CSS 和 JavaScript 組成。它在各種瀏覽器和設備上看起來都是一致的。藝術家使用基本的彈簧算法，使與巨大斑點的交互感覺真實且非人工。

請注意，即使斑點佔據了場景的一半，它也不會壓倒旁觀者。這種不引人注目的背後是平穩、平靜的行為。

查看 Jeffrey 的 Pen Blob

夏洛特丹恩的斑點

如果一個斑點不足以產生正確的印象，那麼您總是可以選擇十幾個。 Charlotte Dann 將用她巧妙的代碼片段向您展示如何在不破壞總體效果和壓倒訪問者的情況下做到這一點。

她的代碼片段只是對眼睛的一種享受。它具有許多相互交互的小移動斑點。每一個看起來都像一個小光點。它們一起形成了一個巨大的斑點，在各個方面都散發著溫暖。

查看夏洛特·丹恩的筆跡

現在，讓我們從平面世界進入 3 維世界。

Georgi Nikoloff 的 Blob

Georgi Nikoloff 的 Blob 就是一個例子。它以其鮮豔的色彩、高科技的外觀和動態的行為立即引起了人們的注意。開發人員充分利用先進技術，利用 WebGL、GLSL 和著色器發揮自己的優勢。儘管該解決方案受瀏覽器兼容性的影響，但它看起來很鼓舞人心。

查看 Georgi Nikoloff 的 Pen blob

Daniel Del Core 的實驗 #6

Daniel Del Core 向在線觀眾展示瞭如何使用 Simplex 噪聲，並使用一些謹慎再現的紋理對其進行修飾。結果是一個受糖果啟發的油漆狀球。雖然它移動得很快，但它是如此迷人，以至於你很難馬上將目光從它身上移開。

參見 Daniel Del Core 的鋼筆實驗 #6

Eli Fitch 的假粒子斑點

與前面的例子不同，它具有大膽的個性和 80 年代迷戀氨綸的流行歌星的魅力，而這個例子感覺就像來自謙虛的 techno 未來。斑點由微小顆粒構成，這些顆粒在某些角度下會變得更亮，以實現 3D 外觀。

可以預見的是，這位藝術家使用了 Three.js 的魔法和一些具有程序紋理的巧妙作品來實現這個概念。

請參閱 Eli Fitch 的 Pen #3December 假粒子斑點

Edwin Chen 的 CSS Blob 生成器

我們將使用 Edwin Chen 的 CSS Blob Generator 來結束我們的收藏。正如標題所述，這支筆有一個小操場，您可以在其中創建一個斑點形狀。

在這裡，您會找到一個小面板，您可以在其中為每個邊框指定一個半徑。儘管它是靜態且扁平的，但您可以輕鬆地複制結果並在 JavaScript 的幫助下將其設置為運動。

查看 Edwin Chen 的 Pen CSS Blob Generator

營造平靜氛圍的完美造型

如今，流暢和平靜的液體行為越來越流行也就不足為奇了。它就像一條穿過森林的迷人小溪，引誘您進入，並在瞬息萬變的網絡世界中充當寧靜的島嶼。

基於 blob 的動畫注定要造福於現代項目。儘管它們肯定會引起注意，但它們並不引人注目。無論您是追求優雅、扁平化的實現還是奢華的 3D，它都能輕鬆營造出一種平靜的氛圍。

它將豐富體驗，裝飾背景，同時讓位於內容。這些背景將幫助您保持視覺和文本數據之間的平衡。