Как сделать эффект печатной машинки

Добавил пользователь Евгений Кузнецов
Обновлено: 18.09.2024

В настоящее время CSS является очень мощным инструментом веб-разработчика, позволяющим создать большое количество качественных визуальных эффектов, не привлекая JavaScript. CSS позволяет контролировать значительное количество параметров, определяющий дизайн Вашего веб-ресурса: стиль графики, цветовое решение, визуальные эффекты.

В этой статье мы разберем эффект набора текста на пишущей машинке с помощью CSS, без какого-либо обращения к JavaScript.

Код HTML содержит всего два блока:

А теперь магия CSS:

Обратим внимание на ключевые моменты CSS-кода:

в нашем примере для того, чтобы получить достоверный эффект пишущей машинки, используется моноширный шрифт,
так же необходимо обратить внимание и поэкспериментировать с такими параметром CSS-анимации, как steps

Готовый пример можно посмотреть на codepen:

Спасмибо за внимание

Написано по материалам статьи Stokry “Typing effect without Javascript”.

Здравствуйте, друзья! Эта статья специально посвящена тем, кто, как и я, работает с программой Camtasia Studio. Сегодня я расскажу о том, как в этой программе реализовать эффект набора текста на печатной машинке.

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

Сам по себе эффект набора текста довольно занимательный и очень хорошо вписывается при оформлении титров, субтитров непосредственно в видео, а также его с успехом можно применить для создания интро (видео заставки) для видеороликов на вашем канале.

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

Ну а теперь к делу. Для работы вам понадобится звуковой файл реального звука работы печатной машинки и соответствующий шрифт. В моем примере выше использован шрифт B 52. Ссылку на скачивание этих двух файлов вы можете найти в описании к одноименному видеоуроку. Сам видеоурок есть ближе к концу статьи. А можете просто сами поискать через поиск.

Фоном может служить сам фон программы, какое-то изображение и, конечно-же, непосредственно видео, которое вы решите дополнить в таком стиле.

Итак, устанавите при желании шрифт, подготовьте и загрузите в программу все необходимые файлы (звук и фон). Теперь на монтажном столе программы расположите сначала фон, над ним звуковой файл и отключите его видимость. Звук пока не нужен, но он должен располагаться именно вторым!

После набора текста мастер слоя выделите его, задайте для него тип шрифта, размер, установите выравнивание слева и уточните его местоположение в кадре.

Выделите данную дорожку и сочетанием клавиш Ctrl+C скопируйте в буфер обмена. При установленном маркере на начало надписи вставьте скопированный слой сочетанием клавиш Ctrl+V. Слои должны получиться один над другим.

Теперь для вставленного слоя задайте чистовой цвет текста. После этого выделите в нем все буквы кроме первой и удалите выделенный фрагмент.

Выделите и скопируйте слой с первой буквой (сочетанием клавиш Ctrl+C), немного сместите вправо маркер и вставье данные из буфера обмена (Ctrl+V). Теперь активируйте только что вставленный слой, выделите в нем букву и на её месте напишите вторую букву нужной вам надписи. После этого сделайте клик по слою с предыдущим символом (первой буквы) и тут же кликнете по слою со второй буквой.

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

Снова сместите маркер немного вправо и поскольку слой со второй буквой остался активным после перемещения, то можете сразу скопировать его и вставить в видеоряд. Естественно, что при этом у вас уже будут сдублированы вторые буквы и вам нужно заменить в верхнем слое (дубле второй буквы) буквенный символ на символ, соответствующий третьей букве. Затем также, как описано выше совмещаете третью букву с третьей буквой мастер слоя…

Аналогичным образом делаете одиночные буквы для всей надписи. После этого нужно отключить или удалить мастер слой и включить дорожку со звуком печатной машинки.

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

При этом можно пользоваться колесиком мышки для перемещения по дорожкам вверх-вниз. Если в вашей надписи есть пробелы, например, между словами, то для них также должен быть звук удара по клавише печатной машинки.

После синхронизации всей надписи, проверьте результат, установите нужную продолжительность эффекта. Если вы чего-то не поняли из моего описания, то посмотрите видео ниже.

Смотри другие видео на моем видеоканале

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

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

Когда вы ознакомитесь с нашей инструкцией о том, как сделать анимацию текста в PowerPoint, то потом с легкостью сможете придать вашему слайд-шоу большей креативности. Эффект пишущей машинки, применённый к тексту, или имитация командной строки не только удивит аудиторию, но и позволит акцентировать внимание на текстовом содержимом презентации.

Какой бы эффект вы не выбрали, последовательность шагов для его применения будет одинаковая. Единственный отличительный фактор — это задействованный стиль.

Для имитации пишущей машинки лучше использовать шрифт Courier New размером 14 пунктов черного цвета. Для создания шрифта по схожести с таким же в командной строке подойдет Lucida Console размером 14 пунктов белого цвета и на черном или зеленом фоне.

Для примера мы создадим эффект командной строки. Создание другой анимации будет практически схожим.

Запустите свою программу подготовки и просмотра презентаций и создайте новый пустой слайд. Мы будем использовать PowerPoint из пакета Microsoft Office 2016.

Как сделать анимацию текста в PowerPoint

Вставка фигуры Прямоугольник

Заливка фигуры

Вставка надписи

Параметры эффектов

Анимация текста

Воспроизвести анимацию

Как с пользой можно применить эффект печатающегося текста на сайтах? Первое, что приходит в голову - для фиксирования внимания посетителей на нужной информации. Появляющийся текст по одной букве, имитирующий эффект печатной машинки, будет выделяться от статичного контента. Идея достойная, осталось только её реализовать и тут без JS никак не обойтись.

Печатающийся текст будет выводиться на HTML странице внутри тега . Этот тег позволяет выводить текст в таком же виде, как он был набран в редакторе, сохраняя пробелы и переносы строк.

Алгоритм действий

Прежде чем приступить к написанию JS кода, набросаем в голове порядок действий:

объявим переменные с необходимыми данными
создадим функцию, печатающую один символ через определенный промежуток времени
печатаем первый символ
увеличиваем счетчик символов на единицу
проверяем, не закончились ли строки и сам текст
очищаем установленный таймаут
зацикливаем функцию

JS код

Создадим переменную text и поместим в неё массив выводимого печатающегося текста, состоящего из строк.

const text = [
'Ты у меня одна,\n',
'Словно в ночи луна,\n',
'Словно в году весна,\n',
'Словно в степи сосна.\n'
];

А теперь представим, что перед нами чистый лист бумаги, заправленный в печатную машинку. Все показатели на нуле - пока нет линий и букв. Создадим ещё три переменные:

let line = 0; // начальная линия текста
let count = 0; // счетчик позиции букв
let result = ''; // получаемый текст на выходе

Создадим функцию, рисующую строки. В теле функции инициализируем переменную, запускающую событие через определенный промежуток времени. Метод setTimeout позволит выполнить, указанное внутри стрелочной функции действие, через заданное количество времени в миллисекундах.

Функция typeLine() добавит в result первый символ в первую строку печатающегося текста. Для этого обратимся к тексту, как к массиву. После этого, выведем печатающийся текст на HTML странице, в теге pre. Получим pre по селектору и для большей реалистичности, в конце каждого символа, добавим символ вертикальной черты.

let line = 0;
let count = 0;
let result = '';
function typeLine() let interval = setTimeout(
() => result += text[line][count]
document.querySelector('pre').innerHTML =result +'|';

К этому моменту функция typeLine() напечатала первый символ - букву "Т". Теперь надо печатать дальше - наращивать переменную count на один символ.

Само по себе ничего не произойдет, поэтому создадим условие. Первым делом нужно проверить, не закончилась ли строка. Если count больше или равен длине строки, то обнуляем счетчик.

if (count >= text[line].length) count = 0;

Дальше задаем условие, что делать, когда закончатся все текстовые линии. Тогда, мы остановим наш таймаут и зациклим вывод функции, вызвав её повторно.

Читайте также: