Главная » Сниппеты » Эффект печатающегося текста с помощью CSS3

Эффект печатающегося текста с помощью CSS3

Эффект печатающегося текста с помощью CSS3

Существует немало решений для реализации эффекта печатающегося текста с помощью javascript. На jQuery например, можно с текстом выписывать такие кренделя, что диву даёшься. Но меня всегда интересует возможность выполнения той или иной задачи с помощью свойств CSS3, конечно только тогда, когда это оправданно и не несёт явных потерь в общей картине конечного результата.
На одном из проектов, мне понадобилось (с легкой руки и по прихоти заказчика) выполнить краткое описание сайта в виде печатающегося текста появляющегося под логотипом вовремя загрузки. Как-то не очень-то хотелось из-за одной строки, подключать в работу дополнительный плагин. Долго искать оптимального решения не пришлось, с помощью CSS-анимации можно создать вполне привлекательную иллюзию печатающегося текста.
Конечно, с использованием специальных jQuery-плагинов, Typed.js например, возможностей больше, в плане настроек и регулирования различных параметров эффекта. Но для простенького печатающегося текста, вполне можно обойтись исключительно средствами CSS, достаточно лишь несколько строк кода и ваш оживет.

Использование CSS анимации

Прежде чем приступить к разбору и описанию свойств CSS, хочу предупредить, что эффект отлично работает в современных браузерах, Firefox, Chrome, Opera и даже IE начиная с 10-й версии справляется с анимацией CSS. Для версий IE9 и ранних, лучше использовать механизмы javascript.

В CSS-анимации есть замечательная функция animation-timing-function, свойство которое описывает метод расчета промежуточных значений свойств при анимации. С помощью одной из фунций этого свойства, а именно steps (), мы сможем определить количество кадров анимации, удалив привычную плавную анимацию и создадим блок анимации, воссоздающий реальный эффект набора текста.
Используя значения функции steps(), мы можем реализовать анимацию, увеличивая размер элементов начиная от 0 и до конца строки(абзаца)

Применим свойство анимации для коротенького абзаца, для этого нужную нам строку текста обернем тегом <p> с определенным классом, например: class="text-typing", в итоге получит следующую конструкцию в html:

<p class="text-typing">Простой пример создания печатающегося текста с помощью CSS3-анимации....</p>

Теперь, непосредственно в css определим все необходимые свойства для этого класса. Выставим нужную нам ширину абзаца, размер, цвет и начертание шрифта, добавим свойство overflow:hidden;, тем самым с помощью связки со значением 0 в @keyframes скроем текст до включения анимации в работу. И наконец определим нужные нам значения анимации в временной функции steps ()

Значения CSS для примера:

.text-typing
{
    width: 40em;
    color:green;
    font-size: 22px;
    font-family: 'Marck Script', cursive;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 5s steps(50, end);
    animation: type 5s steps(50, end);
}
@keyframes type{
    from { width: 0; }
}
 
@-webkit-keyframes type{
    from { width: 0; }
}

Всё! Эффект печатающегося текста готов. Срабатывать он будет каждый раз при перезагрузке страницы, нужный вам текст эффектно отпечатается и замрет, выполнив в полной мере задачу, чтобы его непременно заметил пользователь посетивший ваш сайт.
Ссылка на просмотр демо ведет в онлайн-редактор кода, так что при желании можете вволю поэкспериментировать с параметрами. Если обнаружится какая ошибка в коде или косяк в плане отображения, любые поправки и дополнения, обязательно пишите в комментариях.

В работе использовал оригинальный сниппет из коллекции paulund.

С уважением, Андрей.

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

11 комментариев
  1. Шикарно! Иногда Оч нужная вещь!

    Ответить
  2. Арбарс:

    Здорово... Для какого-нибудь прикола весьма неплохая фишка 🙂

    Ответить
  3. SLAWAMONOLIT:

    Эффект печатающегося текста впечатлил! Спасибо! Добавил Ваш сайт в закладки.

    Ответить
  4. Дима:

    Как всегда, что-то не работает. Зачем выкладывать код с ошибками. В оригинальной статье все работает, а тут...не дописали код.

    Ответить
    • driver:

      Пиз-ц: «Как всегда, что-то не работает»

      Вот вы сейчас написали, лишь бы что-то написать, или как?. У всех работает, а именно у вас нет. Если вы увидели ошибку, то укажите на неё, а так, это смахивает на банальный «пук в пустоту».

      От оригинала, код отличается только лишь размерами контейнера и шрифта.

      В данный момент, сижу уставившись в окна 4-х открытых браузеров и наблюдаю вполне себе корректную работу эффекта.

      Ответить
  5. Владислав:

    Спасибо всё работает))) но вы в примере (в самой статье) не дописали стили @keyframes. Если не перейди по ссылке animation-timing-function и этого не увидеть, то ни чего не работает ))

    Ответить
    • driver:

      Владислав, спасибо за поправку.

      Даже и не заметил, что упустил важную деталь)))

      Ответить
  6. Макс:

    тут есть 1 огромный недостаток. Текст в несколько строе невозможно сдлать

    Ответить
  7. Всё норм работает! Спасибо!

    Ответить
  8. Алекс:

    Скажите, а как доработать этот скрипт, чтобы также текст и стирался.

    Как будто кто-то печатает текст, потом стирает слово, печатает вместо него другое и продолжает печатать дальше?

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru