Animacje tekstu z wpisywaniem kodu za pomocą jQuery TypeIt

The Kombinacja jQuery i tekstu nie ma żadnych ograniczeń w sieci. Możesz zbudować prawie wszystko dzięki odrobinie kreatywności i właściwym bibliotekom JavaScript.

Jedną z takich bibliotek jest Wpisz to, zbudowany jako darmowa wtyczka jQuery. Pozwala tworzyć dynamiczne animacje pisania to wygląda niesamowicie realistycznie. Możesz nawet zdefiniować niestandardowe przerwy między naciśnięciami klawiszy, aby zbudować własne ułatwienia dla animacji.

TypeIt jest w 100% bezpłatny i open-source, zbudowany jako narzędzie tekstowe dla społeczności jQuery. Cała dokumentacja jest dostępna online i niezwykle łatwa do naśladowania.

Należy jednak pamiętać, że podczas gdy TypeIt pochodzi z bezpłatna licencja osobista, licencje komercyjne niestety kosztują pieniądze. Ale możesz korzystać z bezpłatnej licencji osobistej na zawsze i to nigdy nie wygasa, więc jest to świetny zasób dla wszystkich osobistych projektów, a nawet osobistej strony internetowej.

Możesz zacząć od dodanie surowego pliku JavaScript TypeIt przez CDN w prawo do nagłówka strony. Następnie dodaj jQuery, napisz tekst i połącz go razem. Prosty!

Zazwyczaj będziesz wyceluj na określony div na stronie i używaj go jako kontenera do animacji tekstu. Tutaj jest przykładowy fragment kodu aby pokazać, jak to działa:

 $ ('. type-it'). typeIt (strings: ['This is my string!']); 

Przez przekazywanie opcji niestandardowych do Wpisz to() funkcja, możesz spowolnić szybkość pisania, dodawać przerwy w określonych odstępach czasu, a nawet resetować ustawienia w określonych odstępach czasu, aby zmienić szybkość pisania w połowie animacji.

Możesz nawet przetestuj te opcje na stronie wtyczki, jeśli chcesz spędzić trochę czasu bawiąc się z ustawieniami.

Ten kreator animacji tekstu jest doskonałym przykładem tego, co możesz zrobić z tą wtyczką. Masz tak wiele niestandardowych opcji, że możesz nawet zbudować aplikację internetową, używając tej wtyczki, do tworzyć animacje w locie!

Na głównej stronie wtyczki znajdziesz również bardziej zaawansowane opcje do dołu z fragmentami kodu, które możesz skopiować.

Więc pobierz TypeIt i daj mu szansę! Kiedy to już działa, to naprawdę świetna zabawa. Jeśli masz jakieś pytania lub sugestie dla programisty, możesz połączyć się z nim na Twitterze @amacarthur.