10 niesamowitych animowanych fragmentów kodu CSS i kodu JavaScript

Możesz stworzyć całkiem olśniewające efekty tekstowe za pomocą podstawowego CSS i kilku linijek JavaScript. Efekty te obejmują animacje wyświetlania tekstu, rotacje 3D lub cokolwiek innego, co możesz sobie wyobrazić.

W tym poście skatalogowałem 10 najfajniejszych przykładów z całej sieci, pokazując, co można zrobić za pomocą odrobiny stylizowanego tekstu i kodu CSS.

Mogą Ci się również spodobać te narzędzia CSS Animation Tools.

1. Animacja tytułu

Ten animowany efekt tytułowy autorstwa Robina Treura nawiązuje do stylu wielu filmów lub gier wideo. Litery nabierają wystającego efektu 3D za pomocą cieni tekstu CSS3 wraz z lekkim ukośnym skosem.

Zanikający styl animacji przypomina mi klasyczne filmy z lat 30. z tym samym pochyłym tekstem. Wszystko jest kontrolowane przez CSS, ale przycisk „restart” jest zbudowany przy użyciu JavaScript. W ten sposób możesz wielokrotnie odtwarzać animację, aby uzyskać lepszy wygląd.

2. Roztrzaskanie

Tworzenie rozbitego tekstu jest prostym zadaniem za pomocą narzędzi takich jak After Effects, ale tworzenie animacji rozbicia tekstu z kodem jest o wiele trudniejsze, dzięki czemu pióro Arsena Zbidniakova jest całkiem imponujące.

Tekst jest w rzeczywistości zbudowany przy użyciu kształtów SVG, co nieco ułatwia proces animacji. Oznacza to również, że nie możesz zaznaczać, kopiować ani wchodzić w interakcje z tekstem jak zwykle.

Możesz jednak dodać podobny efekt do swojej witryny, jeśli użyjesz jej do logo lub innego nieinteraktywnego elementu strony.

3. Pokręcone litery

Twórca Mamun Khandaker stworzył tę kolekcję pokręconych animacji z literami. Każdy styl animacji ma inną nazwę i możesz przeglądać je wszystkie za pomocą tego jednego pióra.

Widziałem te efekty tekstowe używane na stronach docelowych lub stronach głównych narzędzia/aplikacji internetowej. Od razu przykuwają uwagę i pozostawiają trwałe wrażenie na odwiedzającym. Dodatkowo wszystkie są wykonane w 100% z czystego CSS i są bardzo łatwe do dostosowania.

4. Alfabet pikseli

Ten wyjątkowy animowany efekt pikseli jest zdecydowanie dziwny, ale dziwnie hipnotyzujący. Opiera się głównie na JavaScript i został stworzony przez programistę Georgi Nikoloffa jako sposób na zabawę z elementem płótna HTML5.

Używa Noto Serif jako podstawy czcionki i konwertuje litery na plastyczne elementy wewnątrz elementu canvas. JavaScript dzieli litery na mniejsze kropki, które stanowią podstawę animacji.

Nie mogę powiedzieć, że miałoby to wiele praktycznego zastosowania, ale jest to świadectwem tego, jak daleko zaszła animacja internetowa.

5. Karuzela pisania

Efekt ten jest notorycznie popularny na małych portfolio i stronach agencji. Animacja pisania tekstu często pojawia się w nagłówku witryny i naśladuje wygląd osoby piszącej w edytorze tekstu.

Wszystko jest zawarte w jednym elemencie z dobrą mieszanką animacji CSS i JavaScript. Czasami zobaczysz, że strony internetowe używają tego do wyświetlania opisów swojej pracy, historii lub klientów, z którymi współpracowali.

Jest to zdecydowanie fajny efekt, gdy używa się go z umiarem . Ponieważ na raz widoczne jest tylko jedno słowo, ogranicza to czytelność strony, ale przy oszczędnym użyciu jest to bardzo fajny efekt, który każdy może skopiować.

6. Tygrys Tygrys

Zapożyczone słowa z wiersza Williama Blake'a „Tygrys”, ta wyjątkowa animacja autorstwa Josepha Martucciego naprawdę przykuwa twoją uwagę.

Skupiamy się tutaj nie tyle na treści, co raczej na stylach typograficznych i animacjach. Każdy „segment” tekstu ma swój własny styl z konturami tekstu i efektami świecenia. Jest to świetny przykład tego, jak można stylizować stronę główną, aby sekwencyjnie animować tekst za pomocą setTimeout() .

7. Przyciągnij SVG

Biblioteka Snap.svg o otwartym kodzie źródłowym pozwala każdemu tworzyć obrazy SVG o wysokiej rozdzielczości za pomocą tylko odrobiny kodu. Jest to o wiele łatwiejsze niż nauka programu takiego jak Illustrator i pozwala na animację, tak jak ten zabawny przykład stworzony przez Alexis Blondin.

Wszystkie litery są tworzone dynamicznie za pomocą JavaScript, w tym losowe znaki użyte w animacji. Nowoczesne wsparcie SVG jest ogromne, a te typy obrazów mogą radykalnie zmienić sposób, w jaki budujemy strony internetowe w nadchodzących latach. Ta animacja Snap.svg to tylko jeden przykład i zdecydowanie jest fajna.

8. Animacja wspornika

Oto kolejna dość powszechna technika animacji tekstu, którą cały czas widzę. Wykorzystuje nawiasy z obracającym się tekstem prawie jak rolodex na stronie.

Ta animacja naśladuje efekt karuzeli do pisania, o którym wspomniałem wcześniej, z wyjątkiem tego, że można to zrobić tylko za pomocą CSS. Opiera się na niestandardowej animacji zapętlonej, która przechodzi z jednej klatki kluczowej CSS do drugiej, a każda klatka wyświetla inne słowo lub frazę w obracającym się tekście.

Uważam, że ten efekt jest znacznie subtelniejszy i łatwiejszy do odczytania na stronie głównej. Jeśli szukasz fajnych efektów tekstowych na swoją stronę główną, będzie to doskonały wybór.

9. Niezniszczalna Kimmie Schmidt

Ten słodki efekt logo został zapożyczony z serialu Netflix „Unbreakable Kimmie Schmidt”. Wszystko jest tworzone za pomocą CSS, w tym style tekstu i niestandardowe animacje.

Treść strony posiada klasę, która inicjuje animację, a ta klasa jest dołączana do strony za pomocą JavaScript. Stamtąd to wszystko czysty CSS. Wykorzystuje głównie kilka przekształceń, aby stworzyć zaskakująco realistyczny efekt odbijania.

To kolejny przykład na to, jak wiele CSS3 może zrobić, jeśli wiesz, jak go używać.

10. Wypełnianie tekstu SVG

Na koniec dochodzimy do tej wyjątkowej animacji wypełniacza SVG, wykorzystującej mieszankę cieni pudełkowych i właściwości obrysu CSS.

Ten tekst jest zbudowany w całości z SVG, ale można go również zaznaczyć, dzięki czemu można kopiować/wklejać litery, tak jak zwykły tekst. Jest w pełni zgodny ze wszystkimi przeglądarkami, a animacja jest na tyle subtelna, że ​​zmieściłaby się w każdej witrynie.

Wszystkie te animacje tekstu wnoszą do stołu coś nowego. Być może nie wszystkie z nich są praktyczne lub użyteczne w twojej pracy, ale udowadniają, że prawie wszystko jest możliwe przy odpowiednim podejściu.