Как сделать имитацию набора текста для сайта?

Question

[Петр]

Привет!
Как сделать к примеру в шапке сайта, авто-печатающийся текст типа "Добро пожаловать"?
Google даёт ссыль на один виджет, и то, для Muse (за деньги)
Возможно ли это провернуть в HTML коде или при рисовании шаблона?

Comments

[Петр]

Александр А: типа того, но только мне кажется это gif. а нужно как-то изменяемый в виде кода, дабы приветствие (к примеру) менять, или название.

[Кирилл]

Петр: Только у них не гиф, а канвас и все надписи динамически скриптом выводятся.

Answer 1

[Алексей]

Можно сделать div с overflow: hidden, в нем текст "Добро пожаловать" с подгруженным шрифтом и анимация на css ширины блока с ключевыми кадрами, расчитанными под текст, чтобы буквы появлялись по одной.
Другие варианты - уже с привлечением javascript/jquery.

Comments

[Петр]

знаю что еще можно с помощью jQuery-библиотеки Typed.js... ладно, будем пробовать.

Answer 2

[Даниил Игоревич]

В массив заносите строку и через setInterval выводите символы

Comments

[Петр]

можно чуть подробнее, а то если честно не понял?

[Даниил Игоревич]

Петр: это на скорую руку: codepen.io/pena/pen/rLyBaY
Наверняка можно и лучше, но я на js ничего не писал уже месяца два-два с половиной

[Петр]

Даниил Ораин: понял! спасибо. правда при редактировании, или смене интервала начинает "тупить" и пропускает буквы (слова)

Answer 3

[Артем Каюн]

Используйте @keyframe анимацию, там есть временная функция step. Ну это если старые браузеры не нужно поддерживать.
lea.verou.me/2011/09/pure-css3-typing-animation-wi...

Comments

[Петр]

спасибо!