Как создать анимацию печатной машинки на css?

Question

[Kentavr16]

Нужно создать такую страницу : при прокрутке появляется чистый экран. Внизу - фон в виде верхней части печатной машинки, которая печатает текст страницы. Можно ли сделать на чистом css? Или же подскажите в какую сторону копать.

Comments

[Сергей delphinpro]

Первое, что приходит на ум - использование keyframe анимаций. Однако, скорее всего код получится сильно раздутым.
Я бы сразу смотрел в сторону реализации на javascript.

Answer 1

[Alexander3928]

На css можно но очень муторно и может криво работать. Лучше использовать Typed.js
https://mattboldt.com/demos/typed-js/

Comments

[Kentavr16]

Вся фишка в том, что это эффект курсора. Я бы хотел заморочиться и сделать под механическую печатную машинку. То есть анимировать удар механической 'лапки' с буквой и появление самой буквы на экране. Будпо пользователь смоьрит нс то как кто-то выстукивает текст. Надеюсь на интуитивном уровне вы поняли мое мутное ТЗ)

[Kentavr16]

Хотя. Вы натолкнули на другую идею стилизовать страницу под текстовый редактор. Суть та же, и с вашей библиотекой несложно. Но это на случай если с машинкой никак. Спасибо за ссылку.

[Alexander3928]

Kentavr16, Если я правильно понял, ты хочешь чтобы показывалась кнопка. Ну я такое не делал не знаю как. Но тут уже нужно JS, чтобы понять на какую именно кнопку клавиатуры нажата и потом стилизовать ее

[Alexander3928]

Kentavr16, https://codepen.io/jkantner/pen/RJWrmE вот похожее. Поищи в codepen, я помню там есть твое решение с клавиатурой

[Alexander3928]

Kentavr16, Вот даже лучше https://codepen.io/Alca/pen/vYeyOwd