8 個展示網頁設計中排斥效果的片段

已發表: 2020-10-07

這些天來，帆布實驗是鎮上的話題。它們不僅可以被視為流行的 Web 開發人員遊樂場中的概念，還可以被視為現實項目的解決方案。多樣性無疑是驚人的：從基於流行插件的原始粒子動畫到融合了現代和久經考驗的工具的獨一無二的想法。

今天，我們提請您注意排斥效應。儘管它具有令人厭惡的行為，但它肯定具有吸引人的性質。通過向各個方向推動它們來鼓勵用戶玩風景的細節，或者在某些情況下甚至將所有東西都吹走，它立即成為主要的娛樂方式。它使用戶體驗愉快和令人興奮。

讓我們通過代碼片段探索一系列鼓舞人心的演示，以便您自己了解獨特的趨勢。

排斥線

乍一看，這個演示讓人想起一組吉他弦。將光標移到它們上，您將看到魔法。線條開始彎曲變形，形成一個小球體。

右側的選項面板允許您控制效果。您可以設置鼠標範圍的半徑，添加或減少行數，或更改字符串之間的距離。注意物理。它經過深思熟慮並精心複製。

參見 Daniel Velasquez 的鋼筆排斥線

當應用於數千個點而不是線時，排斥效果看起來簡直太棒了。 Justin Windle 在實踐中證明了這一點。他在 CodePen 上的標誌性和廣受歡迎的項目有一個面板，可以舒適地放置 30,000 個微小顆粒。

它們緊緊地擠在一起，形成一個緻密的表面。將鼠標光標懸停在它上面，您將看到這些點是如何遠離您的。儘管它們不會從視圖中消失，但它們會受到鼠標範圍的限制。因此，您可以看到一個相對較大的空心圓圈，其中的點構成了邊界。

查看 Justin Windle 的 Pen 30,000 Particles

如果簡單的矩形框架不能激發您的創造力，您可以像 Tamino Martinius 在他的 Interactive Particles 項目中所做的那樣，將所有這些點聚集成字符。

他的演示包括一個單詞，其中每個字母由數百個點構成。用鼠標將它們吹走以增加趣味。有一個小型控制中心，您可以在其中更改實驗參數並根據您的喜好進行調整。

請參閱 Tamino Martinius 的 Pen Interactive Particle 徽標

讓我們使用顏色和大小來豐富前面的兩個概念，就像 Louis Hoebregts 在他的 Text to Particles 項目中所做的那樣。

與 Tamino Martinius 的解決方案不同，這裡的點具有不同的半徑和不同的顏色。此外，歡迎您通過使用輸入設置文本來更改文本。鼠標光標具有平滑而溫和的行為，可以分散人群並導致操場上的小騷動。這是一個真正令人賞心悅目的演示。

參見 Louis Hoebregts 的 Pen Text toparticle

驅蟲效果可以很容易地與其他基於物理的解決方案相結合，帶來出色的效果。考慮球和重力。

項目名稱說明了一切。重力以及排斥效應是這個概念的核心——讓體驗變得有趣。

與前面的示例不同，這裡您需要抓住圓圈並將其用作推開其他圓圈的工具。你幾乎可以擊中這些五顏六色的扁球，迫使它們移動。此外，您需要對抗重力，這使得體驗更加令人興奮。

查看 Marco Dell'Anna 的 Pen BALLS&GRAVITY

Marco Dell'Anna 的這個項目也是圍繞重力構建的。您可以使用鼠標光標控制它。使用它來移動粒子並重新排列它們的位置。

請注意，即使粒子會改變它們的位置，它們仍然會努力回到圓圈中。所以在這裡，你可以看到一個起到磁鐵作用的鼠標光標，同時，一個用來推開點的工具（至少是暫時的）。

查看筆吸引器 – Marco Dell'Anna 的 MatterJS

Activate 是 Gerard Ferrandez 創造的一款出色的筆。就像前面的例子一樣，作者也選擇了重力。這次它結合了流體行為，當然還有排斥效果。結果，該項目以其嬉戲的外觀和俏皮的性質吸引了我們。

查看 Gerard Ferrandez 激活的 Pen

排斥效果對粒子動畫也有很大幫助。你可以讓他們更加激動人心。看看 Moar Plasma。

在這裡，您可以看到一個混亂的動畫，鼠標光標通過將它們推到不同的側面來嚇跑所有粒子。您不僅可以享受演示，還可以與之互動。

參見 John Chin-Jew 的 Pen Moar Plasma

Snowy Particles 是另一個很好的例子，傳統的粒子動畫得到了提升。筆的作者 Nat 使用了兩個技巧。

首先，鼠標光標有能力將簡單的點變成雪花，讓場景感覺真的很神奇。其次，添加了一個小的驅蟲效果，可以稍微分散雪團，以便您可以看到獨特的雪片。簡直太棒了。

請參閱 Nat 的 Penparticle.js snow

排斥效果帶來好處並輕鬆將沉悶的場景轉換為盛宴的另一個領域是文本效果。我們已經看到由一千個點組成的單詞看起來很出色。是時候將點變成線，並用排斥效果為所有東西增添趣味。考慮以防萬一。

該項目以一個詞為特色，其中符號由指向觀眾的短而細的線組成。通過這種方式，您幾乎可以感受到它的體積性質。抓住鼠標光標並將其拖過文本，您將看到線條如何開始跳舞。

他們的行為流暢且令人賞心悅目，即使文本本身感覺有點尖銳和尖銳。此外，線條也會自行移動，所以感覺就像有一陣微風吹拂著構圖的一部分。因此，您可以享受真正的傑作，其中簡單的文字運行節目。

參見 Rein van der Woerd 的 Pen Repellers

儘管排斥效果被用來推開構圖的細節，但它仍然是完全有磁性的。你不能把目光從它身上移開。它以其俏皮的行為立即引起了人們的注意，並促使用戶與場景進行交互。

在贏得觀眾的鬥爭中，排斥效應並不孤單。它與其他類型的動畫和效果完美協作，帶來獨特的、引人注目的解決方案。