8 fragmentów, które demonstrują odpychający efekt w projektowaniu stron internetowych

Eksperymenty z płótnem to dziś temat na mieście. Można je postrzegać nie tylko jako koncepcje na popularnych placach zabaw dla twórców stron internetowych, ale także jako rozwiązania dla rzeczywistych projektów. Różnorodność jest bez wątpienia zdumiewająca: od prymitywnych animacji cząsteczkowych opartych na popularnych wtyczkach po jedyne w swoim rodzaju pomysły, będące połączeniem nowoczesnych i sprawdzonych narzędzi.

Dziś zwracamy uwagę na efekt odstraszający. Mimo, że zachowuje się odpychająco, z pewnością ma atrakcyjny charakter. Zachęcając użytkowników do zabawy ze szczegółami scenerii, przesuwając je w różnych kierunkach, a w niektórych przypadkach nawet zdmuchując wszystko, natychmiast staje się główną rozrywką. To sprawia, że ​​wrażenia użytkownika są przyjemne i ekscytujące.

Przyjrzyjmy się kolekcji inspirujących wersji demonstracyjnych z fragmentami kodu, abyś mógł sam zobaczyć unikalny trend.

Odpychanie linii

Na pierwszy rzut oka to demo przypomina zestaw strun gitarowych. Najedź na nie kursorem, a zobaczysz magię. Linie zaczynają się wyginać i deformować, tworząc małą kulę.

Panel opcji po prawej stronie pozwala kontrolować efekt. Możesz ustawić promień zasięgu myszy, dodać lub zmniejszyć liczbę linii lub zmienić odległość między ciągami. Zwróć uwagę na fizykę. Jest przemyślana i starannie odtworzona.

Zobacz linie odpychające pióra Daniela Velasqueza

30 000 cząstek

Efekt odpychania wygląda po prostu niesamowicie, gdy zostanie zastosowany do tysięcy kropek zamiast linii. Justin Windle udowadnia to w praktyce. Jego kultowy i szalenie popularny projekt na CodePen zawiera panel, na którym wygodnie siedzi 30 000 małych cząsteczek.

Są ciasno upakowane, tworząc zwartą powierzchnię. Najedź na niego kursorem myszy, a zobaczysz, jak kropki uciekają przed tobą. Chociaż nie znikają z pola widzenia, są powstrzymywane przez zasięg myszy. Dlatego możesz zobaczyć stosunkowo duży, pusty okrąg, w którym kropki tworzą granicę.

Zobacz pióro 30 000 cząstek autorstwa Justina Windle

Interaktywne cząstki

Jeśli prosta prostokątna ramka nie inspiruje Twojej kreatywności, zawsze możesz zebrać wszystkie te kropki w postacie, tak jak zrobił to Tamino Martinius w swoim projekcie Interactive Particles.

Jego demo zawiera jedno słowo, w którym każda litera składa się z setek kropek. Zdmuchnij je kursorem myszy, aby urozmaicić wszystko. Znajduje się tam małe centrum sterowania, w którym możesz zmienić parametry eksperymentu i dostosować go do swoich preferencji.

Zobacz logo Pen Interactive Particle Logo autorstwa Tamino Martinius

Tekst do cząstek

Pobawmy się kolorem i rozmiarem, aby wzbogacić dwie poprzednie koncepcje kilkoma żywymi zwrotami akcji, jak zrobił to Louis Hoebregts w swoim projekcie Text to Particles.

W przeciwieństwie do rozwiązania Tamino Martiniusa, tutaj kropki mają różne promienie, a także różne kolory. Ponadto możesz zmienić tekst, ustawiając go za pomocą danych wejściowych. Kursor myszy zachowuje się płynnie i łagodnie, rozpraszając tłum i powodując niewielkie zamieszanie na placu zabaw. To naprawdę przyjemne dla oka demo.

Zobacz tekst pióra do cząstek autorstwa Louisa Hoebregts

Kulki i grawitacja

Efekt odstraszający można łatwo połączyć z innymi rozwiązaniami opartymi na fizyce, aby uzyskać znakomite wyniki. Rozważ kule i grawitację.

Nazwa projektu mówi wszystko. Grawitacja, a także efekt odpychania, leżą u podstaw koncepcji – sprawiając, że doświadczenie jest intrygujące.

W przeciwieństwie do poprzednich przykładów, tutaj musisz chwycić krąg i użyć go jako narzędzia do odpychania innych kręgów. Te kolorowe, płaskie kulki można niemal trafić, zmuszając je do ruchu. Ponadto musisz walczyć z grawitacją, co sprawia, że ​​wrażenia są jeszcze bardziej ekscytujące.

Zobacz pióro BALLS&GRAVITY autorstwa Marco Dell'Anna

Atraktor

Ten projekt Marco Dell'Anny również opiera się na grawitacji. Możesz nim sterować za pomocą kursora myszy. Użyj go, aby przenieść cząsteczki i zmienić ich położenie.

Zauważ, że nawet jeśli cząsteczki zmienią swoje położenie, nadal będą dążyć do powrotu do okręgu. Tak więc tutaj widać kursor myszy, który pełni rolę magnesu, a jednocześnie narzędzie do odpychania kropek (przynajmniej tymczasowo).

Zobacz Pen Attractor – MatterJS autorstwa Marco Dell'Anna

Aktywuj

Activate to wyjątkowy długopis stworzony przez Gerarda Ferrandez. Podobnie jak w poprzednim przykładzie, autor również wybrał grawitację. Tym razem łączy się to z płynnym zachowaniem i oczywiście efektem odstraszającym. Dzięki temu projekt wabi nas swoim igraszkowym wyglądem i figlarnym charakterem.

Zobacz pióro aktywowane przez Gerarda Ferrandez

Plazma Moara

Efekt odpychania może być również bardzo pomocny w animacjach cząstek. Możesz sprawić, że będą jeszcze bardziej ekscytujące. Spójrz na Moar Plasma.

Tutaj możesz zobaczyć chaotyczną animację, w której kursor myszy odstrasza wszystkie cząsteczki, przesuwając je w różne strony. Nie tylko możesz cieszyć się wersją demonstracyjną, ale także wchodzić z nią w interakcję.

Zobacz plazmę Pen Moar autorstwa Johna Chin-Żyda

Cząsteczki śniegu

Snowy Particles to kolejny doskonały przykład, w którym tradycyjna animacja cząstek zyskuje na sile. Nat, autor pióra, zastosował dwie sztuczki.

Po pierwsze, kursor myszy ma moc przekształcania prostych kropek w płatki śniegu, dzięki czemu scena jest naprawdę magiczna. Po drugie dodaje się niewielki efekt odstraszający, który lekko rozprasza śnieżną masę, dzięki czemu można zobaczyć charakterystyczne płatki śniegu. Po prostu fantastycznie.

Zobacz śnieg Pen elements.js autorstwa Nat

Odstraszacze

Kolejnym obszarem, w którym efekt odpychania przynosi korzyści i łatwo przekształca nudną scenę w ekstrawagancję, są efekty tekstowe. Widzieliśmy już, jak znakomicie wyglądają słowa utworzone z tysiąca kropek. Czas zamienić kropki w linie i urozmaicić wszystko efektem odstraszania. Rozważać Odstraszacze jako punkt w przypadku.

W projekcie występuje słowo, w którym symbole składają się z krótkich, cienkich linii, które są skierowane do widzów. W ten sposób można niemal poczuć jego wolumetryczny charakter. Chwyć kursor myszy i przeciągnij go po tekście, a zobaczysz, jak linie zaczynają tańczyć.

Ich zachowanie jest płynne i przyjemne dla oka, mimo że sam tekst wydaje się nieco ostry i ostry. Poza tym linie również poruszają się same, więc wydaje się, że lekki powiew kołysze częściami kompozycji. W rezultacie możesz cieszyć się prawdziwym arcydziełem, w którym prosty tekst prowadzi pokaz.

Zobacz odstraszacze piór Rein van der Woerd

Przyciąganie przez odpychanie

Choć efekt odpychania służy do odpychania szczegółów kompozycji, nadal jest on całkowicie magnetyczny. Nie możesz od tego oderwać oczu. Natychmiast przyciąga wzrok swoim zabawnym zachowaniem i zachęca użytkowników do interakcji ze sceną.

Odpychający efekt nie jest jedyny w walce o zdobycie publiczności. Doskonale współpracuje z innymi rodzajami animacji i efektów, tworząc unikalne, przykuwające uwagę rozwiązania.