Wpraw swój tekst w ruch dzięki tym olśniewającym efektom

W dzisiejszych czasach panuje trend wprawiania wszystkiego w ruch. Nie możesz pomóc, jak tylko podążać za tym szaleństwem i rozwijać obsesję wstrzykiwania życia w każdy szczegół strony internetowej. Era statyczna minęła. Wszystko jest dynamiczne. I wiesz co? Użytkownicy doskonale zdają sobie z tego sprawę.

Dla niektórych jest to zła wiadomość, ponieważ wymaga to herkulesowych wysiłków, aby oszukać użytkowników, aby uwierzyli, że statyczna strona internetowa zapewnia ekscytujące wrażenia. Dla innych to okazja do popisu, ujawnienia swojego wewnętrznego geniuszu i wciągnięcia w świat dynamicznego szaleństwa.

Jeśli nadal utkniesz w przekonaniu, że jedyną rzeczą, jaką możesz zrobić z typografią, jest użycie niecodziennego kroju pisma lub ekstrawaganckiego efektu najechania kursorem, to udowodnimy, że się mylisz. Z typografią można zdziałać cuda, przekształcając ją w coś, co nie ulegnie innym pod względem wywierania wrażenia.

A jeśli nie jesteś fanem wciągających lub ciężkich rozwiązań, to rzeczywiście jest to wyjście. Aby zapewnić Ci solidny początek, zebraliśmy kilka niesamowitych fragmentów kodu, w których pismo zostało umiejętnie uruchomione, co dało doskonały wynik.

Animacja wstrząsającego tekstu autorstwa Arsena Zbidniakova

Wystarczy spojrzeć na animację Shattering Text autorstwa Arsena Zbidniakova. Czy to nie genialne? Rozwiązanie nie przytłacza odwiedzających dużą ilością akcji i niepotrzebną dynamiką, ani nie przeciąża systemu. To po prostu działa, pozostawiając wszystkich w stanie „wow”.

Wykonany za pomocą narzędzi GSAP i ścieżki SVG, ten wstrząsający efekt, który łączy i rozkłada tekst, jest po prostu niesamowity. Co więcej, najedź na niego kursorem myszy, a uzyskasz możliwość kontrolowania szybkości procesu, spowalniając wszystko. To jest po prostu fenomenalne.

Animacja tekstu autorstwa Szeni Zadvornykh

Podobnie jak w naszym pierwszym przykładzie, ten fragment kodu przedstawia animację składania i rozkładania tekstu. Jednak tym razem artysta używa Three.js, aby wszystko ożywić. To kolejna kontrolowana eksplozja. Tak, dobrze mnie przeczytałeś: możesz także kontrolować prędkość animacji, klikając i przeciągając. A jeśli podoba ci się ten eksperyment, Szenia ma kilka bardziej zabawnych przykładów. Po prostu sprawdź jego profil.

Krój pisma Motion Graphic i kolejny eksperyment autorstwa Ara

Ara ma kilka oszałamiających eksperymentów z typografią. Oba poniższe przykłady są abstrakcyjne, oparte na manipulacjach geometrycznych oraz w stylu i wyglądzie high-tech. Pod pewnymi względami są nawet nieco dziwaczne.

W pierwszym przykładzie tekst składa się z maleńkich kawałków, które powoli, ale pewnie tworzą trójwymiarowy tunel cząstek.

W drugim, każdy symbol jest zbudowany z prymitywnych wielokątów, takich jak trójkąty, kwadraty i prostokąty, które są wprawiane w ruch. Wydaje się, że czyjaś cyfrowa ręka splata to wszystko razem.

Animacja tekstu GSAP autorstwa Nate Wiley

Nate Wiley zamienił Split Text z Greensock na swoją korzyść, odtwarzając cudowną animację tekstu. Bierze zwykły kawałek tekstu i rozkłada go na drobne fragmenty, z których każdy jest symbolem. Po eksplozji postacie poruszają się w różnych kierunkach i płynnie znikają.

CSS Motion Typography: eksplodujący tekst autorstwa Dudley Storey

W przeciwieństwie do poprzednich przykładów, w których za pięknem rozwiązań stoją zaawansowane technologie, tutaj ruch oparty na CSS prowadzi pokaz. Dudley Storey wprowadza animacje klatek kluczowych CSS, przejścia, JavaScript, SVG i odrobinę magii Adobe Illustrator. Słowo trochę pęka, a następnie rozpada się na wielokątne kawałki w taki sposób, że nadal można je przeczytać. Jeśli chcesz dodać stylowej brutalności do swojej typografii, ten efekt z pewnością jest punktem wyjścia.

Wiele ikon w 3D przy użyciu Three.js autorstwa Yasunobu Ikeda

Podczas gdy Nate Wiley wyrzuca tekst, Yasunobu Ikeda wręcz przeciwnie, zmusza cząsteczki, które są chaotycznie rozrzucone po ekranie, do uformowania tekstu. Tutaj cząsteczki to nic innego jak maleńkie ikony. Autor używa Three.js do odtworzenia tej wspaniałej animacji 3D.

Ścieżka SVG animowany tekst autorstwa Tamino Martinius

Tamino Martinius korzysta z bardziej tradycyjnych manipulacji przy użyciu ścieżek SVG. Dzięki eleganckim kształtom, ultracienkim liniom i płynnemu zachowaniu animacja emanuje elegancją i wyrafinowaniem. Chociaż nie jest tak oszałamiający jak nasz pierwszy przykład, jego moc tkwi w umiejętności dopasowania do wielu projektów, ponieważ jest to z pewnością praktyczne rozwiązanie.

Dla bardziej praktycznego użytkowania

Skoro o tym mowa, zamieściliśmy też kilka inspirujących i praktycznych rozwiązań. Tutaj pismo jest wprawiane w ruch, dzięki czemu możesz stawiać małe kroki w tym kierunku.

Podczas gdy pierwsze dwa przykłady zawierają efekty, które mogą być korzystne dla sloganów i chwytliwych fraz, ten drugi jest interesującym rozwiązaniem dla zwykłych bloków tekstu.

Pomyśl – stwórz cykl autorstwa Mikaela Ainalem

Pióro Mikaela Ainalema pokazuje cykliczną animację, w której słowa są podświetlane rotacyjnie. To doskonały sposób na poprowadzenie użytkowników od jednego słowa do drugiego.

WYCISKANE przez Tryggvi Gylfason

Tryggvi Gylfason dodaje ruchomą linię, która przesuwa się od lewej do prawej strony i zmusza litery do podążania za nią, w ten sposób naciskając lub ciągnąc symbole słowa. Efekt jest niewielki, ale zniewalający.

Rozmycie ruchu Text Scroll z TweenMax autorstwa Ignacio Correia

Ignacio Correia dostarcza tekst z efektem rozmycia ruchu. Kiedy poruszasz się w dół w szybkim tempie, tekst rozmywa się w prawie białą plamę. Gdy zwalniasz, słowa stają się mniej niejasne.

Przypadek wykorzystania animacji w typografii

Te typograficzne animacje zmuszają nas do zatrzymania się i cieszenia się akcją. Są równie inspirujące i przyciągające wzrok jak animacje, które można zobaczyć w innych elementach, takich jak obszary bohaterów.

Niestety wielu z nich na wolności nie widzimy. Wygląda na to, że wszyscy mają obsesję na punkcie używania pełnych akcji animacji pełnoekranowych zamiast wprawiania w ruch prostych liter. Ale jak widzieliśmy tutaj, te efekty mogą mieć równie duży wpływ na użytkowników.