Текстові анімації введення тексту з jQuery TypeIt

The комбо jQuery і текст не має меж в Інтернеті. Ви можете побудувати майже все, що має трохи творчості, і правильні бібліотеки JavaScript.

Однією з таких бібліотек є TypeIt, побудований як безкоштовний плагін jQuery. Це дозволяє створювати динамічні анімації що виглядає неймовірно реалістично. Можна навіть визначити власні паузи між натисканнями клавіш, щоб створити власне полегшення для анімації.

TypeIt є 100% безкоштовним і з відкритим вихідним кодом, побудованим як a текстовий інструмент для спільноти jQuery. Вся документація доступна в Інтернеті і неймовірно легко слідувати.

Тим не менш, просто зауважте, що в той час як TypeIt приходить з безкоштовна особиста ліцензія, комерційні ліцензії, на жаль, коштують грошей. Але, ви можете використовувати безкоштовну особисту ліцензію назавжди і це ніколи не закінчується, так що це великий ресурс для всіх ваших особистих проектів або навіть вашого особистого сайту.

Ви можете розпочати роботу додавання файлу JavaScript TypeIt через CDN праворуч на заголовок сторінки. Потім додайте jQuery, напишіть якийсь текст і з'єднайте його разом. Простий!

Як правило, ви орієнтувати певний div на сторінці і використовувати його як контейнер для анімації тексту. Ось a зразок фрагмента коду щоб показати вам, як це працює:

 $ ('. type-it'). typeIt (strings: ['Це мій рядок!']); 

До передавання власних параметрів до typeIt () функція, ви можете уповільнити швидкість набору тексту, додати паузи через певні проміжки часу, і навіть скинути налаштування через певні проміжки часу, щоб змінити швидкість набору тексту середньої анімації.

Можна навіть перевірте ці параметри на сторінці плагіна, якщо ви хочете витратити деякий час на налаштування.

Цей конструктор анімації тексту є прекрасним прикладом того, що ви можете зробити з цим плагіном. Ви отримуєте багато налаштувань, які ви навіть можете створити веб-додаток, використовуючи цей плагін, до створювати анімації на льоту!

На головній сторінці плагіна ви також знайдете додаткові параметри униз з фрагментами коду, які можна скопіювати.

Отже, скачайте TypeIt і дайте йому постріл! Як тільки ви отримаєте це робота це дійсно дуже весело. І, якщо у вас є які-небудь питання або пропозиції для розробника, ви можете зв'язатися з ним на Twitter @amacarthur.