Bum! Badanie eksplozji w projektowaniu stron internetowych

Istnieje wiele sposobów na przyciągnięcie uwagi publiczności. Jesteśmy rozpieszczani wyborem, mimo że obecny stan technologii jest wciąż niedoskonały. Mamy pewne problemy ze zgodnością przeglądarek i nie każde urządzenie poradzi sobie z tymi wszystkimi wspaniałymi rozwiązaniami, które dostarczają nam twórcy stron internetowych.

Niemniej jednak czasy statycznych stron internetowych, gdzie obrazy były główną siłą napędową, a suwaki z fantazyjnymi przejściami były jedyną przyprawą. Jesteśmy świadkami ery odważnych pomysłów i ekstrawagancji.

Jednym z największych aspektów jest to, że programiści nie ograniczają się do wielkich rzeczy. Tak, możemy zobaczyć liczne animacje na płótnie, przytłaczające eksperymenty VR i wideo, które wymagają trybu pełnoekranowego itp. Jednak dzisiaj nawet najmniejsze szczegóły zyskują własną dawkę uwagi.

Strony internetowe roją się od mikroskopijnych rozwiązań, zwłaszcza tych opartych na kursorze myszy. Możemy natknąć się na wiele sprytnych pomysłów. Są fantastyczne, ale w większości przypadków są (jakiego słowa szukam?) „cicho”. Nie mówię o tym, że wydają dźwięki, ponieważ niektóre rozwiązania oparte na myszach faktycznie wydają dźwięk. Mówię o ich zachowaniu.

Ich zachowanie jest płynne, spokojne i delikatne. W niektórych przypadkach jest tak bezproblemowy, że jest ledwo wyczuwalny. A jeśli jesteś zbyt zaangażowany w treść lub istnieją inne rozpraszające elementy, prawdopodobnie możesz je nawet przeoczyć. Dlaczego więc nie sprawić, by były nieco „głośniejsze”, aby użytkownicy nie przegapili okazji, by się nimi cieszyć?

Jak to zrobić, możesz zapytać. Mam jedno dobre rozwiązanie: sprawić, by rzeczy eksplodowały – dosłownie i w przenośni.

Cząstki w kosmosie – Dean Wagman

Weźmy na przykład ten fantastyczny fragment kodu stworzony przez Deana Wagmana. Choć jest to pierwszy eksperyment na płótnie przeprowadzony przez Deana, to jednak jest bardzo inspirujący. Wystarczy, że klikniesz w dowolnym miejscu na ekranie, a zobaczysz podmuch setek małych, jasnych cząsteczek, które lecą prosto na twoją twarz. Mimo że nie wydaje dźwięku, z pewnością wydaje się niespokojny.

Zobacz pióro
Cząstki w kosmosie autorstwa Deana Wagmana (@deanwagman).

Efekty wybuchu zawsze budzą poczucie, że wydarzyło się coś głośnego. Dlaczego więc nie wykorzystać tego na naszą korzyść i dodać trochę hałasu bez wydawania rzeczywistego dźwięku? Tym bardziej, że mamy tutaj wybór fantastycznych fragmentów kodu. Zbadajmy je razem.

Eksplozja cząstek autorstwa Aleksei / Kaboomerz autorstwa Christophera Lis

Jeśli rozwiązanie Deana Wagmana wygląda trochę za dużo, zawsze możesz spróbować Eksplozja cząstek autorstwa Aleksieja. Lub jeśli, przeciwnie, musisz wywrzeć większy wpływ, zawsze możesz zaadoptować Kaboomerz Christophera Lisa.

Pierwszy fragment kodu zawiera wersję „młodszego brata” eksplozji Deana, w której dziesiątki malutkich cząstek tworzą mały wybuch, który szybko pojawia się i umiera. W przypadku Christophera Lisa zaskoczy Cię wielkość cząstek. Konfetti, które wyłania się z kursora myszy, jest niesamowicie ogromne. Jednak dzięki ich krótkiej żywotności ogólny efekt nie jest przytłaczający. To po prostu miłe.

Zobacz pióro
Eksplozja cząstek JS/CSS3 autorstwa Aleksei (@alek).

Zobacz pióro
#Codevember 5 – Kaboomerz Christophera Lisa (@chriscourses).

Eksplozje DOM autorstwa Davida A.

Jeśli podoba Ci się ten pomysł, ale potrzebujesz czegoś bardziej cyfrowego i inspirowanego stylem retro, to jest niesamowite rozwiązanie stworzone przez Davida. Używa prostokątów o różnych rozmiarach zamiast kół, aby uzyskać piękny 8-bitowy dotyk. W rezultacie możemy być świadkami małego wybuchu charyzmy lat 80-tych.

Zobacz pióro
Eksplozje DOM autorstwa Davida A. (@meodai).

WebGL Sparkles od CreateJS

Jeśli szukasz realistycznej wersji, WebGL Sparkles od CreateJS jest doskonałym przykładem do rozważenia. Mimo że wszystkie cząsteczki są tutaj białe, dzięki przemyślanemu zachowaniu po kliknięciu na ekranie wygląda to jak prawdziwy świąteczny wystrzał. Co więcej, kursor ma piękny ślad, który nadaje scenie odrobinę magii.

Zobacz pióro
CreateJS: WebGL Sparkles autorstwa CreateJS (@createjs).

Automatyczna wyrzutnia fajerwerków autorstwa Christophera Lis

Skoro o tym mowa, nasza kolekcja eksplozji nie będzie kompletna bez dawki pirotechnicznego szaleństwa. Automatyczny wyrzutnia fajerwerków autorstwa Christophera Lisa to fantastyczny przykład do rozważenia. To kreskówkowa wyrzutnia fajerwerków. Dzięki kolorowym drobinkom i kształtom przypominającym goździki przypomina prawdziwe fajerwerki, które rozświetlają rozgwieżdżone niebo.

Zobacz pióro
Dzień 29 – Automatyczna wyrzutnia fajerwerków autorstwa Christophera Lisa (@chriscourses).

Koncepcja zniszczenia okna modalnego od LegoMushroom

Eksperymenty na płótnie nie są jedynymi na naszej liście. Efekty eksplozji można zastosować do różnych elementów interfejsu, takich jak okno modalne. LegoMushroom ma na to żywy dowód. Spójrz na ich koncepcję okien modalnych. Kiedy zamkniesz okno, zamiast zniknąć, rozpada się na kilka kawałków. Jest to idealny dodatek do wszystkich tych fantazyjnych, w pełni ilustrowanych stron internetowych, które są obecnie dość popularne.

Zobacz pióro
Koncepcja modalnego zniszczenia okna autorstwa LegoMushroom (@sol0mka).

Efekt eksplozji SCSS autorstwa Sylvaina Garnota / eksplozja tekstu SVG przez Kacpera Bawola / eksplozja tekstu na płótnie autorstwa Tima Horwooda

Efekty eksplozji mogą być również korzystne dla typografii. Weźmy pod uwagę efekt eksplozji SCSS autorstwa Sylvaina Garnota, eksplozję tekstu SVG autorstwa Kacpera Bawola i eksplozję tekstu na płótnie autorstwa Tima Horwooda.

Wszystkie trzy pokazują efekt eksplozji zastosowany do tekstu. Jak można się było spodziewać, kursor myszy uruchamia każdy z nich.

Sylvain Garnot pozwala użytkownikom wysadzić każdą literę w setki małych kwadratów. Koncept Kacpra Bawola wygląda prawie tak samo, ale tym razem symbol rozpada się na małe trójkąty. A Tim Horwood pozwala użytkownikom rozerwać cały tekst na maleńkie cząstki, które ostatecznie wracają i przywracają wszystko do pierwotnego stanu. Wszystkie trzy pomysły są po prostu niesamowite.

Zobacz pióro
SCSS – efekt wybuchu sylvain garnot (@sylvaingarnot).

Zobacz pióro
Eksplozja tekstu SVG autorstwa Kacpra Bawola (@Casperovic).

Zobacz pióro
Eksplozja tekstu na płótnie, kliknij, aby wyświetlić: Tim Horwood (@tdhorwood).

Wybuch domu autorstwa Ko.Yelie

Efekt eksplozji można również zastosować do obrazów. Ta koncepcja Ko.Yelie jest świetnym przykładem. Klikając na zdjęcie, rozsadzasz je na drobne kawałki. Chociaż trudno jest znaleźć zastosowanie do tego w rzeczywistych interfejsach, zawsze dobrze jest mieć pod ręką kilka niezwykłych rozwiązań, które mogą sprawić, że zwykłe rzeczy będą wyglądały jedyne w swoim rodzaju.

Zobacz pióro
House Explosion autorstwa Ko.Yelie (@ko-yelie).

Wybuchowa funkcja

Efekt eksplozji to kontrowersyjne narzędzie. Nie jest odpowiedni dla każdego interfejsu ze względu na jego „wybuchową” naturę i potężną charyzmę. Mimo że wydaje się nieszkodliwy, a nawet neutralny, gdy jest stosowany w połączeniu z kursorem myszy, jest dość „głośny” – więc musisz być ostrożny.

Pamiętaj, że nie wszyscy ludzie szukają rozrywki na stronach internetowych. I nie wszyscy są gotowi na ekstrawagancje i przytłaczające wrażenia. Pod koniec dnia treść zawsze pozostaje królem.

Jeśli jednak szukasz niecodziennych sposobów na ekscytującą interakcję użytkownika, która jest zabawna i niejako „głośna”, efekt eksplozji bez wątpienia może się przydać.