10 pięknych przykładów animacji cząstek w projektowaniu stron internetowych

Podbijając sieć, animacje cząsteczkowe kilka lat temu zdołały wykroić dla siebie całkiem niszę. Ogromna aktualna obsesja na punkcie projektów, które mają nowoczesny charakter i geometryczny wystrój, sprawia, że ​​są one obecnie jednym z bardziej poszukiwanych rozwiązań.

Z reguły animację cząstek można zobaczyć w sekcjach bohaterów, takich jak na przykład w JetUp Digital.

Jak widać, jest to elegancki sposób na dodanie pewnej pikanterii do pierwszego wrażenia, jednocześnie delikatnie i dyskretnie odgradzając serwis od tłumu.

Aby odtworzyć ten efekt, pierwszym krokiem powinno być stworzenie partys.js.

Jest to lekka wtyczka autorstwa Vincenta Garreau, która jest sercem i duszą większości animacji cząstek. Co więcej, w stanie pierwotnym jest jednym z najczęściej kopiowanych rozwiązań w sieci – choć może nie z tak dużą intensywnością, jak w przykładzie autora.

Generalnie deweloperzy preferują bardziej schludne, skromne i spokojne warianty. Na przykład sprawdź Canvas Particles autorstwa Romswell Roswell Parian Paucar. Jest to połączenie drobinek i paralaksy, które skutkuje wciągającą i dynamiczną estetyką.

Nie oznacza to jednak, że podejście ogranicza się tylko do tego rodzaju realizacji. Weźmy pod uwagę Particles in space autorstwa Deana Wagmana, system cząsteczkowy tylko CSS autorstwa Robina Selmera i, oczywiście, efekt odpychania umiejętnie odtworzony i przedstawiony w kodepie Alexa Safayana. Podczas gdy koncepcja Robina Selmera jest po prostu przyjemnym kawałkiem do oglądania; pozostałe dwa wymagają interakcji użytkownika, a to zawsze jest ekscytujące.

Używanie animacji cząstek do robienia wrażenia

Z biegiem czasu technika dojrzała. Z chaotycznego bałaganu maleńkich białych kropek rozsianych po płótnie przekształcił się w narzędzie o ogromnym potencjale. Nie jest to coś nadzwyczajnego, ale ma w sobie pewien czynnik wow. Ponadto doskonale wpisuje się w nowoczesną, geometryczną i biznesową estetykę – naturalnie je wykańczając.

Założenie jest takie: animacja cząsteczkowa powinna imponować. A programiści trzymają się tego postulatu na dobre i na złe, wykorzystując go jak najlepiej. Rozważmy kilka fenomenalnych fragmentów kodu stworzonych przez prawdziwych fanów tego rozwiązania.

30 000 cząstek autorstwa Justina Windle

Tutaj tytuł mówi sam za siebie. Mając na pokładzie 30 000 cząstek, oczekujesz czegoś wspaniałego. A Justin Windle z pewnością spełnił nasze oczekiwania. Jego koncepcja jest niesamowita. Użyj myszki do zabawy. Fizyka jest po prostu wyjątkowa. Ta wersja animacji cząsteczkowej jest dość popularna wśród programistów, choć nie na tak monumentalną skalę.

Ryba w wodzie – Alex Safayan

Alex Safayan wymyślił prawie to samo rozwiązanie, ale w tym przypadku cząstki są coraz bardziej powiększone. Kursor myszy również odpycha kropki, tworząc ślad z subtelnym efektem falowania. Zachowanie animacji przypomina ruch ryby, gdy znajduje się ona blisko powierzchni wody. Zwróć uwagę na fizykę: wzajemne oddziaływanie między kropkami jest dobrze przemyślane.

PLANKTON – Życie cząstek autorstwa Marco Dell'Anna

Po otrzymaniu nagrody za najgorętszy projekt 2017 roku, Plankton z pewnością zasługuje na uwagę. Projekt fascynuje nie tylko pomysłem, ale także realizacją. Od subtelnej kolorystyki, która pasuje tu jak ulał, po wspaniałe zachowanie, które wygląda niesamowicie naturalnie, Marco Dell'Anna dba o szczegóły.

GWIAZDKOWY autorstwa Marco Dell'Anna

Uwielbiam tu wspaniały klimat retro, neonowe akcenty i cudowną kolorystykę. Tak trudno oderwać od tego wzrok. Gwiezdny pył to symbioza projektowania i kodowania, która owocuje inspirującym arcydziełem.

Punkty grawitacyjne autorstwa Akimitsu Hamamuro

Akimitsu Hamamuro zaprasza do dodania tak zwanych „punktów grawitacji” na swoim placu zabaw. Wtrącają się w chaotyczny ruch kropek i przyciągają je jak magnes. Chociaż nie pełnią roli środka orbity; jednak tworzą ogniska, które zmuszają cząstki do poruszania się w ich kierunku.

CSS Particle Orb autorstwa Nate Wiley

Kule są obecnie dość popularnym wyborem stylistycznym dla obszarów bohaterów. A podejście Nate'a Willeya do tego trendu jest imponujące. Kula wygląda krucho dzięki drobnym drobinkom, a jednocześnie jędrna dzięki przemyślanemu zachowaniu. Jego rutyna rozpadu i przekształcenia sfery jest fantastyczna.

Fale cząstek, Kevin Rajaram

Kevin Rajarm wziął piękno i elegancję animacji cząsteczkowej i wzbogacił ją o wspaniałość Three.js, wprowadzając delikatną, ale naprawdę wyrafinowaną koncepcję. Niesamowity widok fal jest futurystyczny, sztuczny i hipnotyzujący.

Niekonwencjonalne zastosowania

Istnieją jeszcze bardziej imponujące sposoby wykorzystania animacji cząsteczkowej. Zejdźmy z utartych ścieżek i myślmy nieszablonowo: takie podejście może z łatwością skorzystać z takich elementów jak logotypy i napisy.

Interaktywne logo cząstek autorstwa Tamino Martinius

Typowym tego przykładem jest interaktywne logo cząstek. Wygląda na przeprojektowane rozwiązanie fragmentu kodu Justina Windle, który jest opisany powyżej. Chociaż nie ma 30 000 kropek, składa się z imponującej liczby cząstek, które umiejętnie tworzą słowo „CODEPEN”. To jeden z tych przypadków, w których koncepcja znalazła praktyczne zastosowanie.

Tekst do cząstek autorstwa Louisa Hoebregtsa

Kolorowa wersja poprzedniego rozwiązania dostępna jest w tym długopisie Louis Hoebregts. Tutaj tekst jest ukształtowany przez tysiąc kolorowych pełnych kół, które są wzbogacone o tę samą interaktywność, co w poprzednim przykładzie.

Cząstki piszą tekst autorstwa Marco Dell'Anna

Choć nie jest to dramatyczne wejście, jest w nim coś urzekającego. Płynna animacja powoli odsłania postacie i rozpala nasze zainteresowanie. Koncept ma pewien tajemniczy charakter, podobny do intro „Stranger Things”.

PO PROSTU ZRÓB TO Marco Dell'Anna

To kolejne arcydzieło Marco Dell'Anna. Tym razem animacja cząsteczkowa bierze udział w kształtowaniu słynnego logotypu Nike. Od niewyraźnych i półprzezroczystych po ostre i solidne, animacja stopniowo odsłania logo, dyskretnie przykuwając uwagę.

Tekst cząsteczkowy 404 autorstwa enrico toniato

Jeśli uważasz, że jedynym praktycznym zastosowaniem animacji cząsteczkowej jest wzbogacanie sekcji bohaterów, to Enrico Toniato udowodni ci, że się mylisz. Jego podejście do strony błędu jest genialne. Podążaj za jego pomysłem i użyj wprawionych w ruch cząstek, aby ocalić stronę 404 przed nudnym i odrażającym wyglądem.

Efekt przyciągający uwagę

Animacja cząsteczkowa to jeden z tych przypadków, w których mniejsze jest lepsze. Im mniejsze kropki, tym bardziej imponujący efekt, który można osiągnąć. Z jednej strony wygląda na wyrafinowany i skomplikowany, ponieważ w grę wchodzą geometria i fizyka. Z drugiej strony wygląda krucho i subtelnie dzięki delikatnym kształtom. Ta wyjątkowa fuzja sprawia, że ​​animacja cząsteczkowa jest wyjątkowa i przyciąga uwagę.