4 786 Скрипты / Text

Эффект написания письма


Урок в котором будем создавать эффект автоматического написания текста. Но писать будем пером и при высыхании чернил будем окунать его в чернильницу. Также будет эффект эмулирующий написание ошибок, которые будут стираться при написании.

HTML

Наша основная разметка:

Тут у нас два контейнера letter один выступает в роли источника письма (letter_src) и будет скрыт, а второй это пустой контейнер letter для будущего письма. Так же два блока с изображениями пера и погружением пера в чернильницу.

CSS

JS

Основная идея это отображать постепенно все символы один за другим. В зависимости от текущего символа мы можем установить различные задержки и моделировать ошибки. Для имитации расхода чернил, мы отслеживаем символ пробела, и каждое следующее слово становится светлее предыдущего (градации серого) и в конце концов вызываем эффект окунания пера в чернильницу.

Скачать 2098Загрузок 54,12 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи