Как в jQuery имитировать печать текста

Демо Скачать

В данной статье вы узнаете как при помощи скрипта можно добиться эффекта пишущей машинки.

Реалистичная пишущая машинка / ввод текста на jQuery

Для начала создадим страницу с обычным шаблоном на HTML и подключим сразу же нашу любимую JS библиотеку:

Теперь, внутри тега body создаем блок с идентификатором box:

После того как вы все сделали, напишем простенький javascript:

Если запустить в браузере, то в результате будет печататься буква «а» с рандомной скоростью. Усовершенствуем наш скрипт еще больше:

Все незнакомые для вас методы и функции рекомендую прогуглить :). Продолжаем разибирать по шагам, сейчас код ничего не выдает, потому что мы убрали из append букву. Немного терпения, и получаем в итоге:

Вот и всё, мы с вами создали 2 простенькие функции, которые позволили нам решить данную задачу — сделать «как печатная машинка».

Да, скрипт лучше поместить в конце страницы — это общая рекомендация.

Если на вашем сайте необходимо доработать скрипты, обращайтесь.

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.com/dmitriy/.

Какие услуги предоставляю:
- Создание сайтов, шаблонов и компонентов на 1С-Битрикс;
- Разработка функционала с нуля и доработка кода на уже созданных проектах;
- Адаптивная вёрстка макетов и натяжка на Битрикс;
- Парсинг файлов и выгрузка на сайт (форматы - CSV, XML, XLSX, JSON)
- Интеграции со сторонними сервисами по API;
- Многоязычные версии и многое другое.

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.
E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *